"use client";

const providerInfo: Record<string, { name: string; image: string; detail: string }> = {
  WEBPAY: { name: "Webpay", image: "/media/payments/webpay.svg", detail: "Tarjetas mediante Transbank" },
  KLAP: { name: "Klap", image: "/media/payments/klap.svg", detail: "Checkout seguro Klap" },
  GETNET: { name: "Getnet", image: "/media/payments/getnet.svg", detail: "Web Checkout Getnet" },
};

export function PaymentSelector({ providers, selected, onSelect }: {
  providers: string[]; selected: string; onSelect: (provider: string) => void;
}) {
  const available = providers.filter((provider) => providerInfo[provider]);
  if (!available.length) return <p className="form-error">La notaría no tiene medios de pago activos.</p>;
  return <section className="payment-method-section" aria-labelledby="payment-method-title">
    <div><span className="section-kicker">PAGO</span><h3 id="payment-method-title">Elige cómo pagar</h3>
      <p>Mostramos únicamente los medios habilitados por esta notaría.</p></div>
    <div className="payment-method-grid" role="radiogroup" aria-label="Medio de pago">
      {available.map((provider) => {
        const info = providerInfo[provider], active = selected === provider;
        return <button key={provider} type="button" role="radio" aria-checked={active}
          className={`payment-method-card ${active ? "is-selected" : ""}`}
          onClick={() => onSelect(provider)}>
          <img src={info.image} alt={info.name} />
          <span><strong>{info.name}</strong><small>{info.detail}</small></span>
          <b className="payment-method-check">✓</b>
        </button>;
      })}
    </div>
  </section>;
}