// @design-system: domain/AddressCard

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

/** Props for AddressCard */
export interface AddressCardProps {
  /** Address label (e.g. "Home", "Work"). */
  label: string;
  /** Full address string. */
  address: string;
  /** Called when the edit button is clicked. */
  onEdit?: () => void;
  /** Called when the delete button is clicked. */
  onDelete?: () => void;
  /** Additional class names. */
  className?: string;
}

/**
 * AddressCard - label + address + edit/delete actions.
 * Used in address management (FDS §4.11).
 *
 * @example
 * ```tsx
 * <AddressCard label="Home" address="Dizengoff 12, Tel Aviv" onEdit={handleEdit} onDelete={handleDelete} />
 * ```
 */
export function AddressCard({ label, address, onEdit, onDelete, className }: AddressCardProps) {
  const t = useT('domain_address');

  return (
    <div
      data-testid="address-card"
      className={cn(
        'bg-surface-base flex items-start gap-3 rounded-xl border border-border-default px-4 py-3 shadow-sm',
        className,
      )}
    >
      <Icon name="MapPin" size="md" color="primary" className="mt-0.5 shrink-0" />

      <div className="min-w-0 flex-1">
        <p className="text-text-primary text-sm font-semibold">{label}</p>
        <p className="text-text-secondary mt-0.5 text-sm">{address}</p>
      </div>

      <div className="flex shrink-0 gap-1">
        {onEdit && (
          <button
            type="button"
            onClick={onEdit}
            aria-label={t('edit')}
            className="hover:text-brand-primary-600 focus-visible:ring-brand-primary-500 flex h-11 w-11 items-center justify-center rounded-full text-neutral-400 hover:bg-neutral-100 focus-visible:outline-none focus-visible:ring-2"
          >
            <Icon name="Settings" size="sm" />
          </button>
        )}
        {onDelete && (
          <button
            type="button"
            onClick={onDelete}
            aria-label={t('delete')}
            className="hover:text-danger-600 focus-visible:ring-danger-500 flex h-11 w-11 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>
    </div>
  );
}