'use client';
import { FunctionComponent } from 'react';
import Badge from '@mui/material/Badge';
import IconButton from '@mui/material/IconButton';
import { AppIcon } from '@/components/common';

export interface NotificationBellViewProps {
  /** Unread count for the badge (0 hides the badge). */
  count: number;
  /** Accessible label (already translated, includes the count). */
  label: string;
  onClick: () => void;
}

/**
 * The notification bell — a pure badge + icon button. `count` drives the badge (hidden at 0, capped at 99+).
 * Presentational and self-contained so the fast-changing count re-renders only the bell, never the shell
 * around it (the count is fed by the polling `useUnreadCount` in the `NotificationBell` container).
 * @component NotificationBellView
 */
const NotificationBellView: FunctionComponent<NotificationBellViewProps> = ({ count, label, onClick }) => {
  return (
    <IconButton onClick={onClick} aria-label={label} data-testid="notification-bell" color="inherit">
      <Badge
        badgeContent={count}
        max={99}
        overlap="circular"
        sx={{ '& .MuiBadge-badge': { bgcolor: 'var(--bal-error)', color: 'var(--bal-error-contrast)', fontWeight: 700 } }}
      >
        <AppIcon icon="notifications" />
      </Badge>
    </IconButton>
  );
};

export default NotificationBellView;
