import React from 'react'
import type { PaymentMethod } from './PaymentMethodList'

export function PaymentInstructions({ method }: { method: PaymentMethod }) {
  const steps = getSteps(method)
  return (
    <div className="mt-2 rounded border border-black/10 dark:border-white/10 p-3 bg-black/2 dark:bg-white/5">
      <div className="text-sm font-medium mb-2">Cara bayar</div>
      <ol className="list-decimal list-inside space-y-1 text-xs text-black/80 dark:text-white/80">
        {steps.map((s, i) => (
          <li key={i}>{s}</li>
        ))}
      </ol>
    </div>
  )
}

function getSteps(method: PaymentMethod): string[] {
  switch (method) {
    case 'bank_transfer':
      return [
        'Pilih bank dan buat nomor VA.',
        'Masuk ke aplikasi/ATM bank dan pilih menu Virtual Account.',
        'Masukkan nomor VA lalu konfirmasi nominal.',
        'Selesaikan pembayaran sebelum waktu habis.'
      ]
    case 'credit_card':
      return [
        'Isi nomor kartu, masa berlaku, dan CVV.',
        'Klik Bayar dan lengkapi verifikasi 3D Secure/OTP.',
        'Transaksi akan diproses, tunggu konfirmasi penyelesaian.'
      ]
    case 'gopay':
      return [
        'Buka aplikasi GoPay/QRIS dan pilih menu Scan.',
        'Arahkan kamera ke QR di layar.',
        'Konfirmasi pembayaran di aplikasi.'
      ]
    case 'cstore':
      return [
        'Pilih toko (Alfamart/Indomaret) dan buat kode pembayaran.',
        'Datang ke kasir dan tunjukkan/sebutkan kode pembayaran.',
        'Konfirmasi nominal lalu selesaikan pembayaran di kasir.',
        'Simpan struk, status akan diperbarui dalam beberapa menit.'
      ]
    default:
      return ['Ikuti instruksi yang muncul pada layar pembayaran.']
  }
}