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

import type { JSX } from "solid-js";
import { User } from "../../../lib/icons";
import styles from "./UserNavButton.module.scss";

type UserNavButtonProps = {
	isOpen: boolean;
	menuId: string;
	onToggle: () => void;
};

export const UserNavButton = (props: UserNavButtonProps): JSX.Element => {
	return (
		<button
			classList={{
				[styles.userButton]: true,
				[styles.userButtonOpen]: props.isOpen,
			}}
			type="button"
			aria-label={props.isOpen ? "Close profile menu" : "Open profile menu"}
			title={props.isOpen ? "Close profile menu" : "Open profile menu"}
			aria-haspopup="menu"
			aria-controls={props.menuId}
			aria-expanded={props.isOpen}
			onClick={props.onToggle}
		>
			<span class={styles.spinContainer} aria-hidden="true">
				<span class={styles.spinRing} />
			</span>

			<span class={styles.userCore} aria-hidden="true">
				<User size={16} strokeWidth={2.2} />
			</span>
		</button>
	);
};