// Path: Frontend/src/components/shell/TopBar/ThemeToggle.tsx

import type { JSX } from "solid-js";
import type { Theme } from "../../../theme/runtime";
import { Moon, Sun } from "../../../lib/icons";
import styles from "./ThemeToggle.module.scss";

type ThemeToggleProps = {
	theme: Theme;
	onToggle: VoidFunction;
};

export const ThemeToggle = (props: ThemeToggleProps): JSX.Element => {
	return (
		<button
			class={styles.toggleButton}
			type="button"
			onClick={props.onToggle}
			aria-label={`Switch to ${props.theme === "dark" ? "light" : "dark"} theme`}
			title={`Switch to ${props.theme === "dark" ? "light" : "dark"} theme`}
		>
			<span class={styles.iconContainer} aria-hidden="true">
				<span class={`${styles.iconLayer} ${styles.moonLayer}`}>
					<Moon size={18} strokeWidth={2} />
				</span>
				<span class={`${styles.iconLayer} ${styles.sunLayer}`}>
					<Sun size={18} strokeWidth={2} />
				</span>
			</span>
		</button>
	);
};