'use client'

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

const STORAGE_KEY = 'theme-active'

export default function DarkModeToggle() {
  const [isActive, setIsActive] = useState(false)

  useEffect(() => {
    const savedTheme = window.localStorage.getItem(STORAGE_KEY) === 'true'
    setIsActive(savedTheme)
    document.body.classList.toggle('active', savedTheme)
  }, [])

  const handleToggle = useCallback((event: React.MouseEvent<HTMLAnchorElement>) => {
    event.preventDefault()

    const nextState = !isActive
    setIsActive(nextState)
    document.body.classList.toggle('active', nextState)
    window.localStorage.setItem(STORAGE_KEY, String(nextState))
  }, [isActive])

  return (
    <a
      href="#"
      id="darkModeBtn"
      className={`dark-active${isActive ? ' active' : ''}`}
      onClick={handleToggle}
    >
      <img src="/assets/images/icon/moon.png" alt="Moon Icon" className="moon" />
      <img src="/assets/images/icon/sun.png" alt="Sun Icon" className="sun" />
    </a>
  )
}