Order-Loop/components/CustomerChips.tsx

'use client';

export function CustomerChips({
  customers,
  onRemove,
  disabled = false,
}: {
  customers: { id: string; name: string }[];
  onRemove: (id: string) => void;
  disabled?: boolean;
}) {
  if (customers.length === 0) return null;

  return (
    <div className="flex flex-wrap gap-2">
      {customers.map((c) => (
        <span
          key={c.id}
          className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border-2 border-border bg-surface text-sm font-medium"
        >
          {c.name}
          {!disabled && (
            <button
              type="button"
              onClick={() => onRemove(c.id)}
              className="text-muted hover:text-danger ml-0.5 cursor-pointer"
              aria-label={`Remove ${c.name}`}
            >
              &times;
            </button>
          )}
        </span>
      ))}
    </div>
  );
}