headquarter/apps/web/src/components/notification-item.tsx

import { Icon } from "./icon";
import { formatRelativeTime } from "../utils/time";
import type { NotificationItem as NotificationItemType } from "../api/notifications";

export interface NotificationItemProps {
	notification: NotificationItemType;
	onMarkRead: (id: string) => void;
	onDismiss: (id: string) => void;
}

import type { IconName } from "../utils/icons";

const severityIconMap: Record<string, IconName> = {
	info: "info",
	warning: "warning",
	error: "error",
	success: "success",
};

export function NotificationItem({
	notification,
	onMarkRead,
	onDismiss,
}: NotificationItemProps) {
	const isUnread = notification.read_at === null;
	const iconName = severityIconMap[notification.severity] ?? "info";

	return (
		<li
			role="listitem"
			className={`notification-item ${isUnread ? "notification-item--unread" : "notification-item--read"}`}
		>
			<div className="notification-item-icon">
				<Icon name={iconName} size="md" />
			</div>
			<div className="notification-item-content">
				<div className="notification-item-title">{notification.title}</div>
				<div className="notification-item-time">
					{formatRelativeTime(notification.created_at)}
				</div>
			</div>
			<div className="notification-item-actions">
				{isUnread && (
					<button
						type="button"
						className="notification-item-action"
						onClick={() => onMarkRead(notification.id)}
						aria-label="Mark read"
					>
						Mark read
					</button>
				)}
				<button
					type="button"
					className="notification-item-action"
					onClick={() => onDismiss(notification.id)}
					aria-label="Dismiss"
				>
					Dismiss
				</button>
			</div>
		</li>
	);
}