useTheme.ts

type Theme = 'system' | 'dark' | 'light'

export default function useTheme() {
  const [theme, setTheme] = useState<Theme>(() => {
    if (typeof localStorage === 'undefined') return 'system'
    return (localStorage.getItem('theme') as Theme) || 'system'
  })

  useEffect(() => {
    const root = document.documentElement
    if (theme === 'system') {
      localStorage.removeItem('theme')
      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        root.classList.add('dark')
      } else {
        root.classList.remove('dark')
      }
    } else {
      localStorage.setItem('theme', theme)
      if (theme === 'light') {
        root.classList.remove('dark')
      } else {
        root.classList.add('dark')
      }
    }
  }, [theme])
  return { theme, setTheme }
}