Badge Counter

import { useEffect, useState } from "react";

interface BadgeCounterProps {
  count: number;
  max?: number;
  color?: string;
}

export function BadgeCounter({ count, max = 999, color = "bg-red-500" }: BadgeCounterProps) {
  const [animate, setAnimate] = useState(false);
  const display = count >= max ? `${max}+` : String(count);

  useEffect(() => {
    if (count > 0) {
      setAnimate(true);
      const t = setTimeout(() => setAnimate(false), 300);
      return () => clearTimeout(t);
    }
  }, [count]);

  if (count <= 0) return null;

  return (
    <span
      className={`inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full text-[11px] font-bold text-white ${color} transition-all duration-300 ${
        animate ? 'scale-125' : 'scale-100'
      }`}
    >
      {display}
    </span>
  );
}