import type { JSX } from "solid-js";
import { Bell } from "../../../lib/icons";
import { unreadNotificationCount } from "../data/shell.data";
import styles from "./NotificationsButton.module.scss";

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

export const NotificationsButton = (props: NotificationsButtonProps): JSX.Element => {
	const hasUnread = unreadNotificationCount > 0;
	const unreadLabel = hasUnread ? `, ${unreadNotificationCount} unread` : "";

	return (
		<button
			classList={{
				[styles.button]: true,
				[styles.buttonOpen]: props.isOpen,
			}}
			type="button"
			aria-label={`${props.isOpen ? "Close" : "Open"} notifications${unreadLabel}`}
			title={`${props.isOpen ? "Close" : "Open"} notifications`}
			aria-haspopup="menu"
			aria-controls={props.menuId}
			aria-expanded={props.isOpen}
			onClick={props.onToggle}
		>
			<span class={styles.iconWrap} aria-hidden="true">
				<Bell size={18} strokeWidth={2} />
				{hasUnread ? <span class={styles.badge}>{unreadNotificationCount}</span> : null}
			</span>
		</button>
	);
};