---
// Path: src/components/Navbar/DarkModeToggle.astro
import Sun from "../SVGs/Sun.astro";
import Moon from "../SVGs/Moon.astro";
import styles from "./DarkModeToggle.module.scss";
---

<button id="theme-toggle" aria-label="Toggle Dark Mode" class={styles["toggle-btn"]}>
	<div class={styles["icon-container"]}>
		<span class={`${styles["color-icon"]} ${styles["moon-wrapper"]}`}>
			<Moon />
		</span>
		<span class={`${styles["color-icon"]} ${styles["sun-wrapper"]}`}>
			<Sun />
		</span>
	</div>
</button>

<script>
	const handleToggleClick = () => {
		const root = document.documentElement;
		const isDark = root.classList.contains("dark");
		const targetTheme = isDark ? "light" : "dark";

		if (targetTheme === "dark") {
			root.classList.add("dark");
			root.setAttribute("data-theme", "dark");
		} else {
			root.classList.remove("dark");
			root.setAttribute("data-theme", "light");
		}

		localStorage.setItem("theme", targetTheme);
	};

	document.addEventListener("astro:page-load", () => {
		const toggleBtn = document.getElementById("theme-toggle");

		if (toggleBtn) {
			toggleBtn.removeEventListener("click", handleToggleClick);
			toggleBtn.addEventListener("click", handleToggleClick);
		}
	});
</script>