'use client';
import { FunctionComponent } from 'react';
import { useLocale, useTranslations } from 'next-intl';
import { useRouter } from 'next/navigation';
import { notificationsPath } from '@/constants';
import { useUnreadCount } from '@/services/notifications';
import NotificationBellView from './NotificationBellView';

export interface NotificationBellProps {
  /** The shell the bell lives in — decides which notification center it opens. */
  role: 'customer' | 'nurse' | 'admin';
}

/**
 * The notification bell **container** mounted in the app chrome. It subscribes to the polling
 * `useUnreadCount` (stale-while-revalidate) — the only thing in this component that re-renders on a
 * count change, so the shell around it never does (§5 isolation).
 *
 * It always navigates to the notification center. The nurse-on-desktop popover preview it used to open
 * branched on `useMediaQuery(md)`, and the app no longer has a desktop layout to branch on: every
 * viewport renders the same phone-width frame, so that branch only made the same nurse behave
 * differently on the same app. `NotificationBellPopover` stays exported for a surface that genuinely
 * wants an inline preview.
 * @component NotificationBell
 */
const NotificationBell: FunctionComponent<NotificationBellProps> = ({ role }) => {
  const count = useUnreadCount();
  const router = useRouter();
  const locale = useLocale();
  const t = useTranslations('notifications');

  return (
    <NotificationBellView
      count={count}
      label={t('bell_aria', { count })}
      onClick={() => router.push(`/${locale}${notificationsPath(role)}`)}
    />
  );
};

export default NotificationBell;