'use client';

import { useTranslations } from 'next-intl';
import { useItemCount } from '@/lib/store/booking-draft';
import { CART_HEADER_BADGE_OVERFLOW } from '@/lib/constants';

export function CartBadge() {
  const t = useTranslations('header');
  const count = useItemCount();

  if (count === 0) return null;

  const overflow = count > CART_HEADER_BADGE_OVERFLOW;
  const label = overflow
    ? t('cart_count_overflow')
    : t('cart_count', { count });

  return (
    <span
      aria-label={label}
      className="absolute -top-1 -end-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary-600 text-[10px] font-bold leading-none text-white"
    >
      {overflow ? `${CART_HEADER_BADGE_OVERFLOW}+` : count}
    </span>
  );
}