"use client";

/**
 * Dark / light toggle for the landing page.
 *
 * Same mechanism as the language picker: the choice is stored in a `theme`
 * cookie and re-read on the server, so the first paint is already correct and
 * there is no flash of the wrong theme. That also keeps this self-contained,
 * with no ThemeProvider added to the shared root layout.
 *
 * Dark is the default because it is what the design specifies.
 */

import { useRouter } from "next/navigation";
import { useTransition } from "react";
import { MoonIcon, SunIcon } from "lucide-react";
import type { Theme } from "./landing-messages";

export function ThemeToggle({
  current,
  label,
  className,
}: {
  current: Theme;
  label: string;
  className?: string;
}) {
  const router = useRouter();
  const [pending, startTransition] = useTransition();

  const toggle = () => {
    const next: Theme = current === "dark" ? "light" : "dark";
    document.cookie = `theme=${next}; path=/; max-age=31536000; samesite=lax`;
    startTransition(() => router.refresh());
  };

  return (
    <button
      type="button"
      onClick={toggle}
      className={className}
      style={{ opacity: pending ? 0.6 : 1 }}
      aria-label={label}
      title={label}
    >
      {current === "dark" ? <SunIcon size={16} /> : <MoonIcon size={16} />}
    </button>
  );
}