Pop in

import { AnimatePresence, motion, useReducedMotion } from 'motion/react';

// bounce: 0.5 overshoots past full size, then settles.
const POP = { type: 'spring', visualDuration: 0.4, bounce: 0.5 } as const;

export function NotificationBell({ count }: { count: number }) {
  const reduceMotion = useReducedMotion();
  const hidden = reduceMotion ? { opacity: 0 } : { scale: 0 };

  return (
    <button
      type='button'
      aria-label={`Notifications, ${count} unread`}
      className='relative grid size-10 place-items-center rounded-full hover:bg-muted'
    >
      <svg
        viewBox='0 0 24 24'
        fill='none'
        stroke='currentColor'
        strokeWidth={2}
        className='size-5'
        aria-hidden
      >
        <path d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9' />
        <path d='M10.3 21a1.94 1.94 0 0 0 3.4 0' />
      </svg>
      <AnimatePresence>
        {count > 0 && (
          <motion.span
            key='badge'
            initial={hidden}
            animate={{ opacity: 1, scale: 1 }}
            transition={reduceMotion ? { duration: 0.15 } : POP}
            // A quick tween on the way out, so the spring can't overshoot below 0.
            exit={{ ...hidden, transition: { duration: 0.15 } }}
            className='absolute -top-0.5 -right-0.5 grid h-5 min-w-5 place-items-center rounded-full bg-red-500 px-1 text-xs font-semibold text-white'
          >
            {count}
          </motion.span>
        )}
      </AnimatePresence>
    </button>
  );
}