'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Moon, Sun } from 'lucide-react';
import { Button } from '../../ui/button';
import { useTheme } from '../../../hooks/useTheme';
export function ThemeToggle() {
    const { theme, resolvedTheme, setTheme } = useTheme();
    const toggleTheme = () => {
        // If system theme, switch to explicit light/dark
        // If explicit, toggle between light and dark
        if (theme === 'system') {
            setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
        }
        else {
            setTheme(theme === 'dark' ? 'light' : 'dark');
        }
    };
    return (_jsxs(Button, { variant: "ghost", size: "icon", onClick: toggleTheme, "aria-label": `Switch to ${resolvedTheme === 'dark' ? 'light' : 'dark'} mode`, children: [_jsx(Sun, { className: "h-5 w-5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" }), _jsx(Moon, { className: "absolute h-5 w-5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" }), _jsx("span", { className: "sr-only", children: "Toggle theme" })] }));
}
