Midtrans-Middleware/src/features/payments/components/PaymentLogos.tsx

//

export type BankKey = 'bca' | 'bni' | 'bri' | 'cimb' | 'mandiri' | 'permata'

function toProxy(url: string) {
  return `https://images.weserv.nl/?url=${encodeURIComponent(url)}`
}

function BrandImg({ src, alt, compact = false, size, fallbackSrc }: { src: string; alt: string; compact?: boolean; size?: 'xs' | 'sm' | 'md'; fallbackSrc?: string }) {
  const sizeClass = size ? (size === 'xs' ? 'h-4' : size === 'sm' ? 'h-5' : 'h-6') : (compact ? 'h-5' : 'h-6')
  return (
    <img
      src={src}
      alt={alt}
      className={`${sizeClass} inline-block object-contain max-w-full`}
      loading="lazy"
      referrerPolicy="no-referrer"
      onError={(e) => {
        const el = e.currentTarget
        const proxyUsed = el.dataset.proxy === 'used'
        const fbUsed = el.dataset.fb === 'used'
        if (fallbackSrc && !fbUsed) {
          el.src = fallbackSrc
          el.dataset.fb = 'used'
          return
        }
        if (fallbackSrc && !proxyUsed) {
          el.src = toProxy(fallbackSrc)
          el.dataset.proxy = 'used'
          return
        }
      }}
    />
  )
}

const BANK_LOGOS: Record<BankKey, { alt: string; src: string; fb: string }> = {
  // Sumber lokal mengikuti file yang tersedia di public/logos/
  bca: { alt: 'BCA', src: '/logos/1199px-Bank_Central_Asia.svg.png', fb: 'https://upload.wikimedia.org/wikipedia/commons/3/3f/Bank_Central_Asia.svg' },
  bni: { alt: 'BNI', src: '/logos/Bank_Negara_Indonesia_logo_(2004).svg', fb: 'https://upload.wikimedia.org/wikipedia/commons/2/23/Bank_Negara_Indonesia_logo.svg' },
  bri: { alt: 'BRI', src: '/logos/BRI_2025.png', fb: 'https://upload.wikimedia.org/wikipedia/commons/4/42/BRI_2020.svg' },
  cimb: { alt: 'CIMB Niaga', src: '/logos/CIMB_Niaga_logo.svg', fb: 'https://upload.wikimedia.org/wikipedia/commons/2/2d/CIMB_Niaga_logo.svg' },
  mandiri: { alt: 'Bank Mandiri', src: '/logos/Bank_Mandiri_logo_2016.svg', fb: 'https://upload.wikimedia.org/wikipedia/commons/d/df/Bank_Mandiri_logo_2016.svg' },
  permata: { alt: 'PermataBank', src: '/logos/permata Bank.png', fb: 'https://upload.wikimedia.org/wikipedia/commons/4/42/PermataBank_logo.svg' },
}

export function BankLogo({ bank, compact = false, size }: { bank: BankKey; compact?: boolean; size?: 'xs' | 'sm' | 'md' }) {
  const cfg = BANK_LOGOS[bank]
  return <BrandImg src={cfg.src} alt={cfg.alt} compact={compact} size={size} fallbackSrc={cfg.fb} />
}

export function BankLogosRow({ compact = false, size }: { compact?: boolean; size?: 'xs' | 'sm' | 'md' }) {
  const all: BankKey[] = ['bca', 'bni', 'bri', 'cimb', 'mandiri', 'permata']
  return (
    <div className="flex items-center gap-2">
      {all.map((k) => (
        <BankLogo key={k} bank={k} compact={compact} size={size} />
      ))}
    </div>
  )
}

export function CardLogosRow({ compact = false, size }: { compact?: boolean; size?: 'xs' | 'sm' | 'md' }) {
  const logos = [
    { alt: 'Visa', src: '/logos/visa.svg', fb: 'https://upload.wikimedia.org/wikipedia/commons/0/04/Visa.svg' },
    { alt: 'Mastercard', src: '/logos/mastercard.svg', fb: 'https://upload.wikimedia.org/wikipedia/commons/2/2a/Mastercard-logo.svg' },
    { alt: 'JCB', src: '/logos/jcb.svg', fb: 'https://upload.wikimedia.org/wikipedia/commons/3/3a/JCB_logo.svg' },
    { alt: 'American Express', src: '/logos/amex.svg', fb: 'https://upload.wikimedia.org/wikipedia/commons/3/30/American_Express_logo_%282018%29.svg' },
  ]
  return (
    <div className="flex items-center gap-2">
      {logos.map((l) => (
        <BrandImg key={l.alt} src={l.src} alt={l.alt} compact={compact} size={size} fallbackSrc={l.fb} />
      ))}
    </div>
  )
}

export function LogoGoPay({ compact = false, size }: { compact?: boolean; size?: 'xs' | 'sm' | 'md' }) {
  // Gunakan file lokal yang tersedia di public/logos/
  return <BrandImg src="/logos/Gopay_logo.svg" fallbackSrc="https://upload.wikimedia.org/wikipedia/commons/1/1e/Logo_GoPay.svg" alt="GoPay" compact={compact} size={size} />
}

export function LogoQRIS({ compact = false, size }: { compact?: boolean; size?: 'xs' | 'sm' | 'md' }) {
  // Gunakan file lokal yang tersedia di public/logos/
  return <BrandImg src="/logos/Logo_QRIS.svg" fallbackSrc="https://upload.wikimedia.org/wikipedia/commons/0/0a/QRIS_Logo.svg" alt="QRIS" compact={compact} size={size} />
}

export function LogoAlfamart({ compact = false, size }: { compact?: boolean; size?: 'xs' | 'sm' | 'md' }) {
  return <BrandImg src="/logos/ALFAMART_LOGO_BARU.png" alt="Alfamart" compact={compact} size={size} />
}

export function LogoIndomaret({ compact = false, size }: { compact?: boolean; size?: 'xs' | 'sm' | 'md' }) {
  return <BrandImg src="/logos/Logo_Indomaret.png" alt="Indomaret" compact={compact} size={size} />
}

export function LogoCpay({ compact = false, size }: { compact?: boolean; size?: 'xs' | 'sm' | 'md' }) {
  // Sumber lokal sesuai permintaan: public/logos/Cifo_cpay.png
  return <BrandImg src="/logos/Cifo_cpay.png" alt="cPay" compact={compact} size={size} />
}

export function CStoreLogosRow({ compact = false, size }: { compact?: boolean; size?: 'xs' | 'sm' | 'md' }) {
  return (
    <div className="flex items-center gap-2">
      <LogoAlfamart compact={compact} size={size} />
      <LogoIndomaret compact={compact} size={size} />
    </div>
  )
}
export function GoPayLogosRow({ compact = false, size }: { compact?: boolean; size?: 'xs' | 'sm' | 'md' }) {
  return (
    <div className="flex items-center gap-2">
      <LogoGoPay compact={compact} size={size} />
      <LogoQRIS compact={compact} size={size} />
    </div>
  )
}