"use client";
import { useEffect, useState } from "react";

export function ThemeToggle() {
  const [dark, setDark] = useState(false);
  useEffect(() => {
    const mql = window.matchMedia("(prefers-color-scheme: dark)");
    setDark(mql.matches);
  }, []);
  useEffect(() => {
    document.documentElement.style.setProperty("--background", dark ? "#0a0a0a" : "#ffffff");
    document.documentElement.style.setProperty("--foreground", dark ? "#ededed" : "#171717");
  }, [dark]);
  return (
    <button onClick={() => setDark((v) => !v)} style={{ marginLeft: 12 }}>
      {dark ? "라이트" : "다크"}
    </button>
  );
}