import { ActionIcon, Indicator } from "@mantine/core";
import { Bell } from "lucide-react";

export interface NotificationBellProps {
  unreadCount: number;
  /** Opens the notification drawer. */
  onClick?: () => void;
  ariaLabel?: string;
  /** Extra className for the trigger button (e.g. the app's header "island"). */
  triggerClassName?: string;
}

/**
 * Header bell trigger: an icon button with an unread-count indicator. Purely
 * presentational — clicking calls `onClick` (the app opens {@link NotificationDrawer}).
 */
export function NotificationBell({
  unreadCount,
  onClick,
  ariaLabel = "Notifications",
  triggerClassName,
}: NotificationBellProps) {
  const hasUnread = unreadCount > 0;

  return (
    <Indicator
      color="red"
      size={16}
      offset={4}
      disabled={!hasUnread}
      label={unreadCount > 99 ? "99+" : unreadCount}
      styles={{
        indicator: { fontSize: 10, fontWeight: 700, padding: "0 4px" },
      }}
    >
      <ActionIcon
        variant="subtle"
        radius="xl"
        size={36}
        aria-label={ariaLabel}
        className={triggerClassName}
        onClick={onClick}
      >
        <Bell size={17} strokeWidth={1.8} />
      </ActionIcon>
    </Indicator>
  );
}

export default NotificationBell;
