"use client";

import { useState } from "react";

export type Theme = "light" | "dark";

export function ThemeSwitcher({
  initialTheme,
  label,
}: {
  initialTheme: Theme;
  label: string;
}) {
  const [theme, setTheme] = useState(initialTheme);
  const nextTheme = theme === "dark" ? "light" : "dark";
  return (
    <button
      type="button"
      className="icon-button"
      aria-label={label}
      title={label}
      onClick={() => {
        document.documentElement.dataset.theme = nextTheme;
        document.cookie = `capila_theme=${nextTheme}; Path=/; Max-Age=31536000; SameSite=Lax`;
        setTheme(nextTheme);
      }}
    >
      <span aria-hidden="true">{theme === "dark" ? "☀" : "☾"}</span>
    </button>
  );
}