{{-- $variants: array of Modules\Core\Catalog\Services\ProductIndexer's mapVariant()
     shape (id, options: [{option, value, meta}], ...) — plain arrays, not Eloquent
     models, since this is fed from Modules\Core\Catalog\Services\ProductService.
     Use this instead of <x-ui.color-swatch> for options that aren't a color
     (no meta.hex), where a swatch dot has nothing meaningful to show. --}}
@props(['variants', 'option' => null])

<div {{ $attributes }}>
    @if($option)
        <p class="font-bold mb-3 text-sm uppercase tracking-wide">
            {{ $option }}
        </p>
    @endif

    <div
        class="flex flex-wrap gap-2"
        role="group"
        aria-label="{{ $option ?? 'Option' }}"
    >
        @foreach($variants as $variant)
            @php
                $value = $variant['options'][0] ?? null;
                $label = $value['value'] ?? '';
            @endphp
            <x-ui.button
                variant="secondary"
                size="sm"
                data-product-form-target="swatch"
                data-action="click->product-form#selectVariant"
                data-variant-id="{{ $variant['id'] }}"
                aria-label="{{ $label }}"
                aria-pressed="false"
            >{{ $label }}</x-ui.button>
        @endforeach
    </div>
</div>