"use client";

import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
import type React from "react";

export default function ThemeSwitcher(): React.JSX.Element {
	const toggleTheme = (): void => {
		const currentTheme = document.documentElement.getAttribute("data-theme");
		if (currentTheme === "nord") {
			localStorage.theme = "dracula-soft";
			document.documentElement.setAttribute("data-theme", "dracula-soft");
		} else {
			localStorage.theme = "nord";
			document.documentElement.setAttribute("data-theme", "nord");
		}
	};

	return (
		<button
			type="button"
			className="btn w-9 h-9 btn-circle border-2 hover:bg-primary/25 border-primary/75 p-1 transition-colors duration-100"
			onClick={toggleTheme}
		>
			<MoonIcon className="block dark:hidden" />
			<SunIcon className="hidden dark:block" />
		</button>
	);
}