import { cn } from "@/lib/utils";

interface PaymentMethodRowProps {
  cardName?: string;
  expiry?: string;
  brand?: "mastercard" | "visa" | "generic";
  showRemove?: boolean;
  showEdit?: boolean;
  onRemove?: () => void;
  onEdit?: () => void;
  className?: string;
}

function CardBrandIcon({ brand }: { brand: "mastercard" | "visa" | "generic" }) {
  if (brand === "visa") {
    return (
      <span className="text-sm font-bold italic text-[#1434CB]" aria-hidden="true">
        VISA
      </span>
    );
  }

  if (brand === "mastercard") {
    return (
      <span className="relative block h-6 w-10" aria-hidden="true">
        <span className="absolute left-0 top-1 h-5 w-5 rounded-full bg-[#EB001B]" />
        <span className="absolute left-4 top-1 h-5 w-5 rounded-full bg-[#F79E1B] mix-blend-multiply" />
      </span>
    );
  }

  return <span className="block h-6 w-10 rounded bg-gray-200" aria-hidden="true" />;
}

export default function PaymentMethodRow({
  cardName = "MasterCard 6568",
  expiry = "Exp 12/2024",
  brand = "mastercard",
  showRemove = true,
  showEdit = true,
  onRemove,
  onEdit,
  className,
}: PaymentMethodRowProps) {
  return (
    <div
      className={cn(
        "flex w-full items-center gap-4 border border-gray-200 bg-white px-5 py-5",
        className
      )}
    >
      <CardBrandIcon brand={brand} />

      <div className="min-w-0 flex-1">
        <p className="text-sm font-medium text-gray-900">{cardName}</p>
        <p className="mt-1 text-xs text-gray-500">{expiry}</p>
      </div>

      <div className="flex items-center gap-6">
        {showRemove && (
          <button
            type="button"
            onClick={onRemove}
            className="text-xs font-medium text-red-500 transition-colors hover:text-red-600"
          >
            Remove
          </button>
        )}
        {showEdit && (
          <button
            type="button"
            onClick={onEdit}
            className="text-xs font-medium text-[#00AFC1] transition-colors hover:text-[#008fa0]"
          >
            Edit
          </button>
        )}
      </div>
    </div>
  );
}
