{{-- $values: one product option's de-duplicated, ordered values, as built by
     ProductController::buildOptionPicker() — [{id, label, hex}]. Use this
     instead of <x-ui.color-swatch> for options that aren't a color (no hex),
     where a swatch dot has nothing meaningful to show. --}}
@props(['values', 'option' => null, 'optionHandle' => 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($values as $value)
            <x-ui.button
                variant="secondary"
                size="sm"
                data-product-form-target="swatch"
                data-action="click->product-form#selectVariant"
                data-option="{{ $optionHandle }}"
                data-value-id="{{ $value['id'] }}"
                aria-label="{{ $value['label'] }}"
                aria-pressed="false"
            >{{ $value['label'] }}</x-ui.button>
        @endforeach
    </div>
</div>