// @design-system: domain/PaymentMethodChip

'use client';

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

/** Props for PaymentMethodChip */
export interface PaymentMethodChipProps {
  /** Card brand logo URL (e.g. Visa, Mastercard). */
  brandLogoUrl?: string;
  /** Card brand name (e.g. "Visa"). */
  brandName: string;
  /** Last 4 digits of the card. */
  last4: string;
  /** Called after the user confirms removal. */
  onRemove?: () => void;
  /** Additional class names. */
  className?: string;
}

/**
 * PaymentMethodChip - brand logo + last4 + remove action with confirmation.
 * Used in the payment methods settings (FDS §4.11).
 *
 * @example
 * ```tsx
 * <PaymentMethodChip brandName="Visa" last4="4242" onRemove={handleRemove} />
 * ```
 */
export function PaymentMethodChip({
  brandLogoUrl,
  brandName,
  last4,
  onRemove,
  className,
}: PaymentMethodChipProps) {
  const t = useT('domain_payment_method');

  return (
    <div
      data-testid="payment-method-chip"
      className={cn(
        'bg-surface-base flex items-center gap-3 rounded-xl border border-border-default px-4 py-3 shadow-sm',
        className,
      )}
    >
      {/* Brand logo */}
      <div
        className="flex h-8 w-12 shrink-0 items-center justify-center rounded-sm bg-neutral-50"
        aria-hidden="true"
      >
        {brandLogoUrl ? (
          <img
            src={brandLogoUrl}
            alt={brandName}
            width={40}
            height={24}
            className="h-6 w-auto object-contain"
          />
        ) : (
          <Icon name="CreditCard" size="md" color="muted" />
        )}
      </div>

      {/* Label */}
      <div className="min-w-0 flex-1">
        <span className="text-text-primary text-sm font-medium">
          {formatPaymentMethodLabel(brandName, last4)}
        </span>
      </div>

      {/* Remove — single click fires onRemove (matches AddressCard pattern). */}
      {onRemove && (
        <button
          type="button"
          onClick={onRemove}
          aria-label={t('remove')}
          className="hover:text-danger-600 focus-visible:ring-danger-500 flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-neutral-400 hover:bg-neutral-100 focus-visible:outline-none focus-visible:ring-2"
        >
          <Icon name="X" size="sm" />
        </button>
      )}
    </div>
  );
}