import { useState, useEffect } from "react"

export function useSystemTheme() {
  const [isLightMode, setIsLightMode] = useState(false)

  useEffect(() => {
    const mediaQuery = window.matchMedia("(prefers-color-scheme: light)")

    const handleChange = (e: MediaQueryListEvent) => {
      const isLight = e.matches
      setIsLightMode(isLight)

      // Apply or remove the 'dark' class on the document element
      if (isLight) {
        document.documentElement.classList.remove('dark')
      } else {
        document.documentElement.classList.add('dark')
      }
    }

    const isLight = mediaQuery.matches
    setIsLightMode(isLight)

    // Apply or remove the 'dark' class on initial load
    if (isLight) {
      document.documentElement.classList.remove('dark')
    } else {
      document.documentElement.classList.add('dark')
    }

    mediaQuery.addEventListener("change", handleChange)

    return () => mediaQuery.removeEventListener("change", handleChange)
  }, [])

  return isLightMode
}