@php
    $width = $config['width'] ?? [];
    $mobileWidth = is_array($width) && isset($width['mobile']) ? trim((string) $width['mobile']) : '64vw';
    $desktopWidth = is_array($width) && isset($width['desktop']) ? trim((string) $width['desktop']) : '24rem';
    $variant = $config['variant'] ?? 'tenant';
    $item = $config['item'] ?? 'card';
    $itemComponent = match ($item) {
        'list' => 'posts.items.list',
        'media' => 'posts.items.media',
        'listcard' => 'posts.items.listcard',
        default => 'posts.items.card',
    };
@endphp

<div
    class="relative -mx-4 md:mx-0"
    data-posts-carousel
    style="--post-carousel-width-mobile: {{ $mobileWidth }}; --post-carousel-width-desktop: {{ $desktopWidth }};"
>
    <div
        class="flex flex-nowrap gap-4 overflow-x-auto overflow-y-hidden pb-2  px-4 md:px-0   no-scrollbar "
        data-posts-carousel-track
    >
        @foreach ($posts as $post)
            <div class="flex-none basis-[var(--post-carousel-width-mobile)] snap-start md:basis-[var(--post-carousel-width-desktop)]">
                <x-dynamic-component
                    :component="$itemComponent"
                    :post="$post"
                    :board="$board"
                    :variant="$variant"
                    :show-image="$config['showImage'] ?? true"
                    :board-label="$config['boardLabel'] ?? null"
                    :board-label-field="$config['boardLabelField'] ?? null"
                    :show-published-date="$config['showPublishedDate'] ?? false"
                    :excerpt-limit="100"
                />
            </div>
        @endforeach
    </div>

    <div class="pointer-events-none absolute inset-y-0 left-0 right-0 hidden items-center justify-between md:flex">
        <x-ui.button
            type="button"
            variant="ghost"
            size="sm"
            iconOnly
            class="pointer-events-auto h-11 w-11 rounded-full border border-muted bg-base/90 shadow-sm backdrop-blur transition-colors hover:bg-base"
            aria-label="이전 글"
            data-posts-carousel-prev
        >
            <svg viewBox="0 0 24 24" fill="none" class="h-5 w-5" aria-hidden="true">
                <path d="M14.5 6 9 12l5.5 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </x-ui.button>

        <x-ui.button
            type="button"
            variant="ghost"
            size="sm"
            iconOnly
            class="pointer-events-auto h-11 w-11 rounded-full border border-muted bg-base/90 shadow-sm backdrop-blur transition-colors hover:bg-base"
            aria-label="다음 글"
            data-posts-carousel-next
        >
            <svg viewBox="0 0 24 24" fill="none" class="h-5 w-5" aria-hidden="true">
                <path d="m9.5 6 5.5 6-5.5 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </x-ui.button>
    </div>
</div>