"use client";
import { useEffect, useState } from "react";
import { IconMoon, IconSun } from "./Icons";

export function ThemeToggle({ label = "Toggle colour scheme" }: { label?: string }) {
  const [dark, setDark] = useState<boolean | null>(null);
  useEffect(() => {
    const stored = localStorage.getItem("as-theme");
    const prefers = window.matchMedia("(prefers-color-scheme: dark)").matches;
    const d = stored ? stored === "dark" : prefers;
    setDark(d);
    document.documentElement.classList.toggle("dark", d);
  }, []);
  const toggle = () => {
    const d = !dark;
    setDark(d);
    document.documentElement.classList.toggle("dark", d);
    localStorage.setItem("as-theme", d ? "dark" : "light");
  };
  return (
    <button
      type="button"
      onClick={toggle}
      aria-label={label}
      aria-pressed={dark === true}
      className="btn-icon"
      title={label}
    >
      {dark ? <IconSun /> : <IconMoon />}
    </button>
  );
}