Badge

import { motion } from 'motion/react';

// The word carries the meaning too, so it reads without the color.
const STATUS = {
  live: 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-300',
  beta: 'bg-violet-500/15 text-violet-700 dark:text-violet-300',
  failed: 'bg-red-500/15 text-red-700 dark:text-red-300'
};
const PILL = 'rounded-full px-2 py-0.5 text-xs font-medium capitalize';
// A quick, springy pop when the count changes draws the eye without shouting.
const BUMP = { type: 'spring', stiffness: 600, damping: 15 } as const;

type Props = { name: string; status: keyof typeof STATUS; unread: number };

export function ProjectHeader({ name, status, unread }: Props) {
  return (
    <header className='flex w-96 items-center justify-between'>
      <div className='flex items-center gap-2'>
        <h2 className='font-semibold'>{name}</h2>
        <span className={`${PILL} ${STATUS[status]}`}>{status}</span>
      </div>
      <button
        type='button'
        aria-label={`Notifications, ${unread} unread`}
        className='relative rounded-lg p-2 hover:bg-muted'
      >
        <svg
          viewBox='0 0 24 24'
          aria-hidden='true'
          className='size-5 fill-none stroke-current stroke-[1.75]'
        >
          <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>
        {unread > 0 && (
          // A new key remounts the badge, which replays the pop. Hidden at 0, capped at 99+.
          <motion.span
            key={unread}
            initial={{ scale: 1.2 }}
            animate={{ scale: 1 }}
            transition={BUMP}
            aria-hidden='true'
            className='absolute top-0.5 right-0.5 min-w-4.5 rounded-full bg-red-600 px-1 text-[11px] leading-4.5 font-semibold text-white tabular-nums'
          >
            {unread > 99 ? '99+' : unread}
          </motion.span>
        )}
      </button>
    </header>
  );
}