@props([
    'items' => [],
    'value' => null,
    'label' => 'Segmented control',
    'size' => 'md',
])

<div
    {{ $attributes->class([
        'ui-segmented-control',
        'ui-segmented-control--'.$size,
    ])->merge([
        'role' => 'radiogroup',
        'aria-label' => $label,
    ]) }}
>
    @foreach ($items as $item)
        @php
            $itemValue = (string) ($item['value'] ?? $item['id'] ?? $loop->index);
            $isActive = (string) $value === $itemValue || (is_null($value) && ! empty($item['active']));
            $isDisabled = ! empty($item['disabled']);
            $labelText = $item['label'] ?? $itemValue;
            $badge = $item['badge'] ?? null;
            $icon = $item['icon'] ?? null;
            $href = $item['href'] ?? null;
            $segmentClasses = ['ui-segment', 'is-active' => $isActive, 'is-disabled' => $isDisabled];
        @endphp

        @if ($href && ! $isDisabled)
            <a
                href="{{ $href }}"
                @class($segmentClasses)
                role="radio"
                aria-checked="{{ $isActive ? 'true' : 'false' }}"
                data-ui-segment-value="{{ $itemValue }}"
            >
                @if ($icon)
                    <x-ui.icon :name="$icon" size="14" />
                @endif
                <span>{{ $labelText }}</span>
                @if (! is_null($badge))
                    <span class="ui-segment-badge">{{ $badge }}</span>
                @endif
            </a>
        @else
            <button
                type="button"
                @class($segmentClasses)
                role="radio"
                aria-checked="{{ $isActive ? 'true' : 'false' }}"
                data-ui-segment-value="{{ $itemValue }}"
                @disabled($isDisabled)
            >
                @if ($icon)
                    <x-ui.icon :name="$icon" size="14" />
                @endif
                <span>{{ $labelText }}</span>
                @if (! is_null($badge))
                    <span class="ui-segment-badge">{{ $badge }}</span>
                @endif
            </button>
        @endif
    @endforeach
</div>