// @design-system: domain/cart/CartStaleToast
// Registered at /design-system#cartstaletoast-domain

'use client';

import { cn } from '@/lib/cn';
import { Pill } from '@/components/ui/primitives/Pill';
import { useT } from '@/lib/i18n/react';

/** Reason an item was removed from cart. */
export type StaleReason = 'expired' | 'sold_out';

/** A removed cart item with reason */
export interface RemovedItem {
  dealId: string;
  title: string;
  reason: StaleReason;
}

/** Props for CartStaleToast */
export interface CartStaleToastProps {
  /** List of items removed due to staleness. */
  removedItems: RemovedItem[];
  /** Additional class names. */
  className?: string;
}

/**
 * CartStaleToast — body content listing removed cart items with reason chips.
 *
 * This is the renderable body; wrapping in a Toast is done by the caller (W2-B).
 *
 * @example
 * ```tsx
 * <CartStaleToast removedItems={removed} />
 * ```
 */
export function CartStaleToast({ removedItems, className }: CartStaleToastProps) {
  const t = useT('cart');

  if (removedItems.length === 0) return null;

  return (
    <div className={cn('flex flex-col gap-2', className)}>
      {removedItems.map((item) => (
        <div key={item.dealId} className="flex items-center justify-between gap-2">
          <span className="text-text-primary truncate text-sm">{item.title}</span>
          <Pill
            tone={item.reason === 'expired' ? 'warning' : 'danger'}
            size="sm"
            className="shrink-0"
          >
            {item.reason === 'expired' ? t('removedExpired') : t('removedSoldOut')}
          </Pill>
        </div>
      ))}
    </div>
  );
}