"use client";

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

import { Button } from "@/components/ui/button";
import {
	Tooltip,
	TooltipContent,
	TooltipTrigger,
} from "@/components/ui/tooltip";

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

	function toggleTheme() {
		const isDark =
			typeof document !== "undefined" &&
			document.documentElement.classList.contains("dark");

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

	return (
		<Tooltip>
			<TooltipTrigger asChild>
				<Button
					type="button"
					variant="ghost"
					size="icon-sm"
					onClick={toggleTheme}
					aria-label="Design umschalten"
				>
					<Moon className="h-4 w-4 dark:hidden" aria-hidden="true" />
					<Sun className="hidden h-4 w-4 dark:block" aria-hidden="true" />
					<span className="sr-only">Design umschalten</span>
				</Button>
			</TooltipTrigger>

			<TooltipContent side="bottom">Design umschalten</TooltipContent>
		</Tooltip>
	);
}