"use client";

import { Moon, Sun } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";

const THEME_STORAGE_KEY = "cad-skills-theme-v2";

export function ThemeToggle() {
  const toggleTheme = () => {
    const root = document.documentElement;
    const isDark = !root.classList.contains("dark");
    const theme = isDark ? "dark" : "light";

    root.classList.toggle("dark", isDark);
    root.style.colorScheme = theme;

    try {
      window.localStorage.setItem(THEME_STORAGE_KEY, theme);
    } catch {
      // The class change still applies when storage is unavailable.
    }
  };

  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button
          type="button"
          variant="outline"
          size="icon"
          className="card-glow h-8 w-8 border-border bg-card text-foreground hover:bg-secondary hover:text-primary"
          onClick={toggleTheme}
          aria-label="Toggle light and dark mode"
        >
          <Sun className="size-4 dark:hidden" />
          <Moon className="hidden size-4 dark:block" />
        </Button>
      </TooltipTrigger>
      <TooltipContent side="bottom">Light / dark</TooltipContent>
    </Tooltip>
  );
}