import React, { createContext, useContext, useState, useEffect } from "react";

interface ThemeContextProps {

darkMode: boolean;

toggleDarkMode: () => void;

}

const ThemeContext = createContext<ThemeContextProps | undefined>(undefined);

export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({

children,

}) => {

const [darkMode, setDarkMode] = useState<boolean>(false);

// 페이지 로드 시 저장된 테마 상태를 로드합니다

useEffect(() => {

const savedTheme = localStorage.getItem("darkMode") === "true";

setDarkMode(savedTheme);

if (savedTheme) {

document.documentElement.classList.add("dark");

} else {

document.documentElement.classList.remove("dark");

}

}, []);

// 다크 모드 토글 함수

const toggleDarkMode = () => {

setDarkMode((prev) => {

const newDarkMode = !prev;

localStorage.setItem("darkMode", newDarkMode.toString());

if (newDarkMode) {

document.documentElement.classList.add("dark");

} else {

document.documentElement.classList.remove("dark");

}

return newDarkMode;

});

};

return (

<ThemeContext.Provider value={{ darkMode, toggleDarkMode }}>

{children}

</ThemeContext.Provider>

);

};

// 커스텀 훅으로 Context를 쉽게 사용할 수 있게 합니다

export const useTheme = () => {

const context = useContext(ThemeContext);

if (!context) {

throw new Error("useTheme must be used within a ThemeProvider");

}

return context;

};