"use client";

import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";

import { Button, type ButtonProps } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type ThemeToggleProps = {
  ariaLabel?: string;
  label?: string;
  variant?: ButtonProps["variant"];
  className?: string;
  iconClassName?: string;
};

export function ThemeToggle({
  ariaLabel = "Toggle theme",
  label,
  variant = "outline",
  className,
  iconClassName,
}: ThemeToggleProps) {
  const { setTheme, theme, resolvedTheme } = useTheme();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return (
      <Button
        type="button"
        variant={variant}
        size={label ? "sm" : "icon"}
        aria-label={ariaLabel}
        className={cn("group cursor-pointer", label ? "justify-start" : undefined, className)}
      >
        <Moon className={cn("h-4 w-4 transition-transform duration-700 ease-out group-hover:scale-110 group-hover:rotate-[360deg]", iconClassName)} />
        {label ? <span>{label}</span> : null}
      </Button>
    );
  }

  const activeTheme = theme === "system" ? resolvedTheme : theme;
  const isDark = activeTheme === "dark";

  return (
    <Button
      type="button"
      variant={variant}
      size={label ? "sm" : "icon"}
      onClick={() => setTheme(isDark ? "light" : "dark")}
      aria-label={ariaLabel}
      className={cn("group cursor-pointer", label ? "justify-start" : undefined, className)}
    >
      {isDark ? (
        <Sun className={cn("h-4 w-4 transition-transform duration-700 ease-out group-hover:scale-110 group-hover:rotate-[360deg]", iconClassName)} />
      ) : (
        <Moon className={cn("h-4 w-4 transition-transform duration-700 ease-out group-hover:scale-110 group-hover:rotate-[360deg]", iconClassName)} />
      )}
      {label ? <span>{label}</span> : null}
    </Button>
  );
}