// @design-system: domain/cart/CartIconButton
// Registered at /design-system#carticonbutton-domain

'use client';

import { cn } from '@/lib/cn';
import { Icon } from '@/components/ui/icons/Icon';
import { useT } from '@/lib/i18n/react';
import { AnimatedNumber } from '@/components/ui/domain/AnimatedNumber';

/** Props for CartIconButton */
export interface CartIconButtonProps {
  /** Total item count (sum of quantities). Renders nothing if 0. */
  count: number;
  /** Called when button is clicked. */
  onClick?: () => void;
  /** Additional class names. */
  className?: string;
}

/**
 * CartIconButton — shopping cart nav button with badge overlay.
 *
 * - Renders nothing if count is 0.
 * - Shows "9+" when count exceeds 9.
 * - Badge digit is aria-hidden; aria-label on the button includes count.
 *
 * @example
 * ```tsx
 * <CartIconButton count={cartCount} onClick={() => setCartOpen(true)} />
 * ```
 */
export function CartIconButton({ count, onClick, className }: CartIconButtonProps) {
  const t = useT('cart');

  const displayCount = count > 9 ? '9+' : String(count);
  const ariaLabel = count > 0 ? t('badgeLabel').replace('{count}', String(count)) : t('title');

  return (
    <button
      type="button"
      aria-label={ariaLabel}
      onClick={onClick}
      data-cart-fly-target="true"
      className={cn(
        'relative inline-flex items-center justify-center',
        'h-10 w-10 rounded-md',
        'text-text-secondary',
        'hover:bg-surface-hover hover:text-text-primary',
        'focus-visible:ring-brand-primary-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1',
        'duration-fast transition-colors',
        className,
      )}
    >
      <Icon name="ShoppingCart" size="md" aria-hidden />

      {count > 0 && (
        <span
          aria-hidden="true"
          className={cn(
            'absolute end-0 top-0',
            'flex h-[1.125rem] min-w-[1.125rem] items-center justify-center',
            'bg-brand-primary-600 rounded-full',
            'text-brand-on-primary px-1 text-xs font-bold',
            'leading-none motion-safe:animate-[md-cart-pill-pop_var(--duration-slow)_cubic-bezier(0.22,1,0.36,1)]',
          )}
          data-fx="nav-pill"
        >
          <AnimatedNumber
            value={Math.min(count, 9)}
            formatValue={() => displayCount}
            reserveValue={9}
            className="leading-none"
            ariaLabel={ariaLabel}
          />
        </span>
      )}
    </button>
  );
}