'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) and navigates to the role's notification center on click. Because
 * only this small container reads the fast-changing count, a count change re-renders just the bell — not the
 * whole shell.
 * @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;
