@props([
    'images' => [],
])

@php
    $imageList = collect($images)->filter()->values();
    $main = $imageList->first();
@endphp

<div
    x-data="{ active: @js($main) }"
    {{ $attributes->merge(['class' => 'space-y-3']) }}
>
    <div class="aspect-square overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-bg)]">
        <template x-if="active">
            <img :src="active" alt="" class="h-full w-full object-cover">
        </template>
        @unless ($main)
            <div class="flex h-full items-center justify-center text-[var(--color-text-muted)]">No image</div>
        @endunless
    </div>

    @if ($imageList->count() > 1)
        <div class="grid grid-cols-4 gap-2 sm:grid-cols-6">
            @foreach ($imageList as $image)
                <button
                    type="button"
                    class="aspect-square overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)]"
                    @click="active = @js($image)"
                    :class="active === @js($image) ? 'ring-2 ring-[var(--color-primary)]' : ''"
                >
                    <img src="{{ $image }}" alt="" class="h-full w-full object-cover" loading="lazy">
                </button>
            @endforeach
        </div>
    @endif
</div>