// @design-system: domain/cart/CartEmptyState
// Registered at /design-system#cartemptystate-domain

'use client';

import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';
import { Icon } from '@/components/ui/icons/Icon';
import { Button } from '@/components/ui/primitives/Button';
import { useT } from '@/lib/i18n/react';

/** Props for CartEmptyState */
export interface CartEmptyStateProps {
  /** Optional illustration slot — if omitted, a default ShoppingCart icon is shown. */
  illustration?: ReactNode;
  /** Called when the "Browse deals" CTA is clicked. */
  onBrowse?: () => void;
  /** Additional class names. */
  className?: string;
}

/**
 * CartEmptyState — illustration + heading + CTA shown when cart is empty.
 *
 * @example
 * ```tsx
 * <CartEmptyState onBrowse={() => router.push('/')} />
 * ```
 */
export function CartEmptyState({ illustration, onBrowse, className }: CartEmptyStateProps) {
  const t = useT('cart');

  return (
    <div
      className={cn('flex flex-col items-center justify-center gap-4 py-12 text-center', className)}
    >
      {/* Illustration slot */}
      <div className="bg-surface-subtle text-text-muted flex h-20 w-20 items-center justify-center rounded-full">
        {illustration ?? <Icon name="ShoppingCart" size="xl" aria-hidden />}
      </div>

      <p className="text-text-primary text-base font-semibold">{t('empty')}</p>

      {onBrowse && (
        <Button variant="primary" size="md" onClick={onBrowse}>
          {t('emptyCta')}
        </Button>
      )}
    </div>
  );
}