@props([
    'name',
    'checked' => false,
    'label' => null,
    'description' => null,
    'color' => 'emerald', // emerald, amber, violet, blue, pink, orange, cyan
    'size' => 'md', // sm, md
    'disabled' => false,
])

@php
    $colors = [
        'emerald' => ['bg' => 'linear-gradient(135deg, #10b981, #06b6d4)', 'glow' => '0 0 15px rgba(16, 185, 129, 0.4)'],
        'amber' => ['bg' => 'linear-gradient(135deg, #f59e0b, #f97316)', 'glow' => '0 0 15px rgba(245, 158, 11, 0.4)'],
        'violet' => ['bg' => 'linear-gradient(135deg, #8b5cf6, #a78bfa)', 'glow' => '0 0 15px rgba(139, 92, 246, 0.4)'],
        'blue' => ['bg' => 'linear-gradient(135deg, #3b82f6, #60a5fa)', 'glow' => '0 0 15px rgba(59, 130, 246, 0.4)'],
        'pink' => ['bg' => 'linear-gradient(135deg, #ec4899, #f472b6)', 'glow' => '0 0 15px rgba(236, 72, 153, 0.4)'],
        'orange' => ['bg' => 'linear-gradient(135deg, #f97316, #fb923c)', 'glow' => '0 0 15px rgba(249, 115, 22, 0.4)'],
        'cyan' => ['bg' => 'linear-gradient(135deg, #06b6d4, #22d3ee)', 'glow' => '0 0 15px rgba(6, 182, 212, 0.4)'],
    ];

    $colorStyle = $colors[$color] ?? $colors['emerald'];

    $sizes = [
        'sm' => ['track' => 'w-9 h-5', 'thumb' => 'h-4 w-4', 'translate' => 'translate-x-4'],
        'md' => ['track' => 'w-11 h-6', 'thumb' => 'h-4 w-4', 'translate' => 'translate-x-6'],
    ];

    $sizeClasses = $sizes[$size] ?? $sizes['md'];
@endphp

<div class="flex items-center justify-between gap-3">
    @if($label || $description)
    <div class="flex-1 min-w-0">
        @if($label)
        <label for="{{ $name }}" class="text-sm font-medium text-db-text-primary {{ $disabled ? 'opacity-50' : '' }}">
            {{ $label }}
        </label>
        @endif
        @if($description)
        <p class="text-xs text-db-text-muted mt-0.5 {{ $disabled ? 'opacity-50' : '' }}">{{ $description }}</p>
        @endif
    </div>
    @endif

    <button
        type="button"
        role="switch"
        id="{{ $name }}"
        aria-checked="{{ $checked ? 'true' : 'false' }}"
        {{ $disabled ? 'disabled' : '' }}
        {{ $attributes->merge(['class' => 'glass-toggle relative inline-flex items-center rounded-full transition-all duration-200 ' . $sizeClasses['track'] . ($disabled ? ' opacity-50 cursor-not-allowed' : ' cursor-pointer')]) }}
        style="{{ $checked ? 'background: ' . $colorStyle['bg'] . '; box-shadow: ' . $colorStyle['glow'] . '; border-color: rgba(255,255,255,0.2);' : '' }}"
    >
        <span
            class="inline-block rounded-full bg-white shadow-lg transition-transform duration-200 {{ $sizeClasses['thumb'] }} {{ $checked ? $sizeClasses['translate'] : 'translate-x-1' }}"
        ></span>
    </button>

    {{-- Hidden input for form submission --}}
    <input type="hidden" name="{{ $name }}" value="{{ $checked ? '1' : '0' }}">
</div>