"use client";

import { useTheme } from "next-themes";
import { Moon, Sun } from "lucide-react";
import { Button } from "@/components/ui/button";

export function ThemeToggle({ className }: { className?: string }) {
  const { resolvedTheme, setTheme } = useTheme();

  return (
    <Button
      type="button"
      variant="ghost"
      size="icon"
      className={className}
      aria-label="Toggle color theme"
      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
    >
      {/* CSS-driven swap keeps SSR/CSR markup identical (no hydration mismatch) */}
      <Moon className="size-4 dark:hidden" strokeWidth={1.5} aria-hidden />
      <Sun className="hidden size-4 dark:block" strokeWidth={1.5} aria-hidden />
    </Button>
  );
}