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

@php
    $label = $label ?: __('kview-ui-core::ui.navigation.segmented_control');
    $variant = in_array($variant, ['default', 'pills'], true) ? $variant : 'default';
@endphp

<div
    {{ $attributes->class([
        'ui-segmented-control',
        'ui-segmented-control--'.$size,
        'ui-segmented-control--'.$variant,
    ])->merge([
        'role' => 'group',
        '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];
            $itemAttributes = new \Illuminate\View\ComponentAttributeBag($item['attributes'] ?? []);
        @endphp

        @if ($href && ! $isDisabled)
            <a
                {{ $itemAttributes->class($segmentClasses) }}
                href="{{ $href }}"
                @if ($isActive) aria-current="true" @endif
                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
                {{ $itemAttributes->class($segmentClasses) }}
                type="button"
                aria-pressed="{{ $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>