import { FC } from 'react';
import { useTheme } from './theme-provider';
interface ThemeToggleProps {
className?: string;
}
// Sun icon for light mode
const SunIcon = () => (
);
// Moon icon for dark mode
const MoonIcon = () => (
);
// System icon (monitor)
const SystemIcon = () => (
);
export const ThemeToggle: FC = ({ className = '' }) => {
const { theme, setTheme, resolvedTheme } = useTheme();
const cycleTheme = () => {
if (theme === 'light') setTheme('dark');
else if (theme === 'dark') setTheme('system');
else setTheme('light');
};
const getThemeLabel = () => {
if (theme === 'system') return 'System';
return theme === 'dark' ? 'Dark' : 'Light';
};
const renderIcon = () => {
if (theme === 'system') {
return ;
}
return resolvedTheme === 'dark' ? : ;
};
return (
);
};
export default ThemeToggle;