1  import { useThemeStore } from '../../store/theme'
 2  
 3  export default function ThemeToggle() {
 4    const { theme, setTheme } = useThemeStore()
 5  
 6    const cycleTheme = () => {
 7      if (theme === 'light') {
 8        setTheme('dark')
 9      } else if (theme === 'dark') {
10        setTheme('system')
11      } else {
12        setTheme('light')
13      }
14    }
15  
16    return (
17      <button
18        onClick={cycleTheme}
19        className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
20        title={`Theme: ${theme}`}
21        aria-label={`Current theme: ${theme}. Click to change.`}
22      >
23        {theme === 'light' && (
24          <svg
25            className="w-5 h-5 text-amber-500"
26            fill="none"
27            viewBox="0 0 24 24"
28            stroke="currentColor"
29          >
30            <path
31              strokeLinecap="round"
32              strokeLinejoin="round"
33              strokeWidth={2}
34              d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
35            />
36          </svg>
37        )}
38        {theme === 'dark' && (
39          <svg
40            className="w-5 h-5 text-indigo-400"
41            fill="none"
42            viewBox="0 0 24 24"
43            stroke="currentColor"
44          >
45            <path
46              strokeLinecap="round"
47              strokeLinejoin="round"
48              strokeWidth={2}
49              d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
50            />
51          </svg>
52        )}
53        {theme === 'system' && (
54          <svg
55            className="w-5 h-5 text-gray-500 dark:text-gray-400"
56            fill="none"
57            viewBox="0 0 24 24"
58            stroke="currentColor"
59          >
60            <path
61              strokeLinecap="round"
62              strokeLinejoin="round"
63              strokeWidth={2}
64              d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
65            />
66          </svg>
67        )}
68      </button>
69    )
70  }