"use client"
import Image from "next/image";
import { useEffect, useState } from "react";
import { icons } from "#/assets/icons"

export default function Theme() {
  const [theme, setTheme] = useState<string | null>(null);

  useEffect(() => {
    if (typeof window !== "undefined") {
      const savedTheme = localStorage.getItem("theme") || 
        (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");

      setTheme(savedTheme);
      document.body.setAttribute("data-theme", savedTheme);
    }
  }, []);

  const handleTheme = () => {
    const newTheme = theme === "light" ? "dark" : "light";
    setTheme(newTheme);
    localStorage.setItem("theme", newTheme);
    document.body.setAttribute("data-theme", newTheme);
  };

  useEffect(() => {
    if (theme === null) return; 

    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    const handleChange = (e: MediaQueryListEvent) => {
      const newTheme = e.matches ? "dark" : "light";
      setTheme(newTheme);
      localStorage.setItem("theme", newTheme);
      document.body.setAttribute("data-theme", newTheme);
    };

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

  if (theme === null) return null;

  return (
    <div onClick={handleTheme} className="theme">
      <button type="button" className="icon-border">
        {theme === "light" ? (
          <Image src={icons.sunIcon} alt="Light Mode" width={20} height={20} className="m-[2px]" />
        ) : (
          <Image src={icons.moonIcon} alt="Dark Mode" width={20} height={20} className="m-[2px]" />
        )}
      </button>
    </div>
  );
}