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

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

  const cycleTheme = () => {
    const themes: ThemeTypes[] = ['light', 'dark', 'system'];
    const currentIndex = themes.indexOf(theme);
    const nextIndex = (currentIndex + 1) % themes.length;
    setTheme(themes[nextIndex]);
  };

  const getIcon = () => {
    switch (theme) {
      case 'light':
        return <Sun className='h-4 w-4' />;
      case 'dark':
        return <Moon className='h-4 w-4' />;
      case 'system':
        return <Monitor className='h-4 w-4' />;
      default:
        return <Monitor className='h-4 w-4' />;
    }
  };

  return (
    <Button
      variant='outline'
      size='icon'
      onClick={cycleTheme}
      aria-label='Toggle theme'>
      {getIcon()}
    </Button>
  );
}