@props([
    'mode' => 'light',
    'url' => '',
])

@php
    $activeMode = in_array($mode, ['light', 'dark', 'system'], true) ? $mode : 'light';
    $themeOptions = [
        'light' => ['label' => 'Light', 'description' => 'Bright workspace'],
        'dark' => ['label' => 'Dark', 'description' => 'Low-light workspace'],
        'system' => ['label' => 'System', 'description' => 'Follows device'],
    ];
    $themeCopy = [
        'light' => 'Light mode is active.',
        'dark' => 'Dark mode is active.',
        'system' => 'Following your device setting.',
    ];
@endphp

<div
    class="theme-switch-wrap"
    data-theme-switch
    data-theme-url="{{ $url }}"
    data-current-theme="{{ $activeMode }}"
>
    <input type="hidden" name="theme_mode" value="{{ $activeMode }}" data-theme-mode-field>

    <div class="theme-switch-card">
        <div class="theme-switch-header">
            <div class="min-w-0">
                <p class="theme-switch-title">Interface theme</p>
                <p class="theme-switch-copy" data-theme-switch-copy>
                    {{ $themeCopy[$activeMode] }}
                </p>
            </div>
        </div>

        <div class="theme-switch-stage" role="radiogroup" aria-label="Choose interface theme">
            @foreach ($themeOptions as $value => $option)
                <button
                    type="button"
                    class="theme-mode-option {{ $activeMode === $value ? 'is-active' : '' }}"
                    data-theme-mode-option="{{ $value }}"
                    role="radio"
                    aria-checked="{{ $activeMode === $value ? 'true' : 'false' }}"
                >
                    <span class="theme-mode-label">{{ $option['label'] }}</span>
                    <span class="theme-mode-description">{{ $option['description'] }}</span>
                </button>
            @endforeach
        </div>
    </div>

    <p class="theme-switch-status" data-theme-switch-status aria-live="polite"></p>
</div>