"use client";

import { Moon, Sun } from "lucide-react";
import { useTheme } from "@/context/theme-context";
import { cn } from "@/lib/cn";

/**
 * Theme toggle — CSS icon crossfade (no Framer during page VT)
 * so the circular page reveal stays fluid.
 */
export function ThemeToggle() {
  const { theme, toggleTheme } = useTheme();
  const isDark = theme === "dark";

  return (
    <button
      type="button"
      onClick={(event) =>
        toggleTheme({ clientX: event.clientX, clientY: event.clientY })
      }
      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
      className={cn(
        "relative inline-flex h-8 w-8 items-center justify-center overflow-hidden text-foreground",
        "transition-[transform,background-color] duration-300 hover:text-[var(--accent)] active:scale-95",
      )}
    >
      <Sun
        className={cn(
          "absolute h-4 w-4 transition-[transform,opacity] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]",
          isDark
            ? "rotate-0 scale-100 opacity-100"
            : "rotate-90 scale-50 opacity-0",
        )}
        aria-hidden
      />
      <Moon
        className={cn(
          "absolute h-4 w-4 transition-[transform,opacity] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]",
          isDark
            ? "-rotate-90 scale-50 opacity-0"
            : "rotate-0 scale-100 opacity-100",
        )}
        aria-hidden
      />
    </button>
  );
}