// Path: Frontend/src/components/dashboard/shared/dashboard-theme-toggle.tsx

import type { Component } from "solid-js";
import { useTheme } from "../../../context/theme/context";
import styles from "./dashboard-theme-toggle.module.scss";

const DashboardThemeToggle: Component = () => {
	const { toggleMode } = useTheme();

	return (
		<button type="button" aria-label="Toggle colour scheme" class={styles.toggleButton} onClick={toggleMode}>
			<div class={styles.iconContainer}>
				<span class={`${styles.colorIcon} ${styles.moonWrapper}`}>
					<svg viewBox="0 0 24 24" aria-hidden="true">
						<path d="M15.5 3.5A7.5 7.5 0 1 0 20.5 16a8 8 0 1 1-5-12.5Z" />
					</svg>
				</span>
				<span class={`${styles.colorIcon} ${styles.sunWrapper}`}>
					<svg viewBox="0 0 24 24" aria-hidden="true">
						<circle cx="12" cy="12" r="4.5" />
						<path d="M12 2.5v2.2M12 19.3v2.2M4.7 4.7l1.6 1.6M17.7 17.7l1.6 1.6M2.5 12h2.2M19.3 12h2.2M4.7 19.3l1.6-1.6M17.7 6.3l1.6-1.6" />
					</svg>
				</span>
			</div>
		</button>
	);
};

export default DashboardThemeToggle;