"use client";

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

import { Button } from "@/components/ui/button";

export default function ThemeToggleButton() {
	const { setTheme } = useTheme();

	function toggleTheme() {
		// We intentionally read the current state from the DOM class to avoid
		// hydration-unsafe theme reads during SSR/SSG. :contentReference[oaicite:2]{index=2}
		const isDark =
			typeof document !== "undefined" &&
			document.documentElement.classList.contains("dark");

		setTheme(isDark ? "light" : "dark");
	}

	return (
		<Button
			type="button"
			variant="ghost"
			size="icon-sm"
			onClick={toggleTheme}
			aria-label="Design umschalten"
			title="Design umschalten"
		>
			{/* Light mode: show Moon (switch to dark) */}
			<Moon className="h-4 w-4 dark:hidden" aria-hidden="true" />

			{/* Dark mode: show Sun (switch to light) */}
			<Sun className="hidden h-4 w-4 dark:block" aria-hidden="true" />

			<span className="sr-only">Design umschalten</span>
		</Button>
	);
}