"use client";

import Image from "next/image";
import { useEffect, useState, type MouseEvent } from "react";

const THEME_STORAGE_KEY = "theme-active";

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

  useEffect(() => {
    const savedTheme = localStorage.getItem(THEME_STORAGE_KEY) === "true";
    setTimeout(() => {
      setIsActive(savedTheme);
    }, 0);
  }, []);

  useEffect(() => {
    document.body.classList.toggle("active", isActive);
  }, [isActive]);

  const handleThemeToggle = (event: MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();
    const nextIsActive = !isActive;
    localStorage.setItem(THEME_STORAGE_KEY, String(nextIsActive));
    setIsActive(nextIsActive);
  };

  return (
    <button
      id="darkModeBtn"
      className={`dark-active ${isActive ? "active" : ""}`}
      onClick={handleThemeToggle}
    >
      <Image
        src="/assets/images/icon/moon.png"
        alt="Moon Icon"
        className="moon"
        width={20}
        height={20}
      />
      <Image
        src="/assets/images/icon/sun.png"
        alt="Sun Icon"
        className="sun"
        width={20}
        height={20}
      />
    </button>
  );
}