'use client';

import { useTheme } from './theme-provider';
import { Moon, Sun, Monitor } from 'lucide-react';
import { Button } from './ui/button';

export function ThemeToggle() {
    const { theme, setTheme, resolvedTheme } = useTheme();

    const toggleTheme = () => {
        if (theme === 'light') setTheme('dark');
        else if (theme === 'dark') setTheme('system');
        else setTheme('light');
    };

    const Icon = theme === 'light' ? Sun : theme === 'dark' ? Moon : Monitor;

    return (
        <Button
            variant="ghost"
            size="sm"
            onClick={toggleTheme}
            className="h-9 w-9 p-0"
            title={`Theme: ${theme}`}
        >
            <Icon className="h-4 w-4" />
            <span className="sr-only">Toggle theme</span>
        </Button>
    );
}