"use client";

import { cn } from "@aur-ui/ui/lib/utils";
import { MoonIcon, SunIcon } from "lucide-react";
import { useTheme } from "next-themes";

/**
 * Light/dark toggle on next-themes. Both icons are always in the tree and
 * the `dark:` variant cross-fades them with a small rotation — CSS-driven,
 * so SSR markup is stable and there is no post-mount icon flash.
 */
export function ThemeToggle({
  "aria-label": ariaLabel = "Toggle theme",
  className,
}: {
  "aria-label"?: string;
  className?: string;
}) {
  const { resolvedTheme, setTheme } = useTheme();

  return (
    <button
      type="button"
      aria-label={ariaLabel}
      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
      className={cn(
        "relative inline-flex size-8 items-center justify-center rounded-control text-ink-500 transition-colors hover:bg-ink-wash hover:text-ink-900",
        className,
      )}
    >
      <SunIcon
        aria-hidden
        className="size-4 scale-0 -rotate-90 transition-transform duration-300 dark:scale-100 dark:rotate-0"
      />
      <MoonIcon
        aria-hidden
        className="absolute size-4 scale-100 rotate-0 transition-transform duration-300 dark:scale-0 dark:rotate-90"
      />
    </button>
  );
}