"use client";

import { SunIcon, MoonIcon } from '@heroicons/react/24/outline';
import { MoonIcon as MoonIconSolid } from '@heroicons/react/24/solid';
import useTheme, { Theme } from '@/hooks/useTheme';

// Segmented Light / Mid / Dark control for the (always dark) sidebar.
const OPTIONS: { value: Theme; label: string; Icon: typeof SunIcon }[] = [
    { value: 'light', label: 'Light', Icon: SunIcon },
    { value: 'mid', label: 'Mid', Icon: MoonIcon },
    { value: 'dark', label: 'Dark', Icon: MoonIconSolid },
];

export default function ThemeSwitcher() {
    const { theme, setTheme } = useTheme();
    return (
        <div className="mb-3 flex rounded-lg bg-gray-800/60 border border-gray-700/50 p-1">
            {OPTIONS.map(({ value, label, Icon }) => (
                <button
                    key={value}
                    onClick={() => setTheme(value)}
                    title={`${label} theme`}
                    className={`flex-1 flex items-center justify-center gap-1 rounded-md px-2 py-1.5 text-[11px] font-mono uppercase tracking-wide transition-colors ${
                        theme === value
                            ? 'bg-gray-700 text-white'
                            : 'text-gray-400 hover:text-white'
                    }`}
                >
                    <Icon className="h-4 w-4" aria-hidden="true" />
                    {label}
                </button>
            ))}
        </div>
    );
}
