import React from 'react';
import { ThemePreference } from '../hooks/useTheme';
interface ThemeToggleProps {
preference: ThemePreference;
onThemeChange: (theme: ThemePreference) => void;
}
export function ThemeToggle({ preference, onThemeChange }: ThemeToggleProps) {
const cycleTheme = () => {
const cycle: ThemePreference[] = ['system', 'light', 'dark'];
const currentIndex = cycle.indexOf(preference);
const nextIndex = (currentIndex + 1) % cycle.length;
onThemeChange(cycle[nextIndex]);
};
const getIcon = () => {
switch (preference) {
case 'light':
return (
);
case 'dark':
return (
);
case 'system':
default:
return (
);
}
};
const getTitle = () => {
switch (preference) {
case 'light':
return 'Theme: Light (click for Dark)';
case 'dark':
return 'Theme: Dark (click for System)';
case 'system':
default:
return 'Theme: System (click for Light)';
}
};
return (
);
}