import { useCallback, useEffect, useState } from 'react'

const THEME_KEY = 'gitdata-admin-theme'

export function useTheme() {
  const [dark, setDark] = useState(() => {
    const stored = window.localStorage.getItem(THEME_KEY)
    if (stored) {
      return stored === 'dark'
    }
    return window.matchMedia('(prefers-color-scheme: dark)').matches
  })

  useEffect(() => {
    document.documentElement.classList.toggle('dark', dark)
    window.localStorage.setItem(THEME_KEY, dark ? 'dark' : 'light')
  }, [dark])

  const toggle = useCallback(() => setDark((value) => !value), [])
  return { dark, toggle }
}