@props([
    'compact' => false,
])

<div x-data="themeSwitcher()" 
     class="inline-flex items-center bg-white/[0.04] theme-pill-container border border-white/[0.08] rounded-full p-0.5 text-xs font-mono transition-colors select-none">
    <button type="button"
            @click="set('light')" 
            :class="theme === 'light' ? 'bg-[#C2552E] text-white font-bold shadow-sm' : 'text-slate-400 hover:text-white'"
            class="px-2.5 py-1 rounded-full flex items-center gap-1.5 transition-all text-[11px]"
            title="Warm Sand Light Mode">
        <span aria-hidden="true">☀</span>
        @if (!$compact)
            <span class="text-[10px] uppercase font-bold tracking-wider hidden sm:inline">Light</span>
        @endif
    </button>
    <button type="button"
            @click="set('dark')" 
            :class="theme === 'dark' ? 'bg-[#C2552E] text-white font-bold shadow-sm' : 'text-slate-400 hover:text-white'"
            class="px-2.5 py-1 rounded-full flex items-center gap-1.5 transition-all text-[11px]"
            title="Obsidian Dark Mode">
        <span aria-hidden="true">☾</span>
        @if (!$compact)
            <span class="text-[10px] uppercase font-bold tracking-wider hidden sm:inline">Dark</span>
        @endif
    </button>
    <button type="button"
            @click="set('auto')" 
            :class="theme === 'auto' ? 'bg-[#C2552E] text-white font-bold shadow-sm' : 'text-slate-400 hover:text-white'"
            class="px-2.5 py-1 rounded-full flex items-center gap-1.5 transition-all text-[11px]"
            title="Auto (System Preference)">
        <span aria-hidden="true">⚙</span>
        @if (!$compact)
            <span class="text-[10px] uppercase font-bold tracking-wider hidden sm:inline">Auto</span>
        @endif
    </button>
</div>