"use client"

import { Building2, CreditCard, Landmark, Globe } from "lucide-react"

interface Props {
  onSelect: (rail: "bank" | "gocardless" | "card" | "fpx") => void
  amount: number
}

export function PaymentStep({ onSelect, amount }: Props) {
  const pounds = (amount / 100).toFixed(2)

  const options = [
    {
      id: "bank" as const,
      icon: Building2,
      title: "Bank Transfer",
      subtitle: "Zero fees — 100% goes to charity",
      tag: "Recommended",
      tagColor: "bg-success-green text-white",
      detail: "Use your banking app to transfer directly",
    },
    {
      id: "gocardless" as const,
      icon: Landmark,
      title: "Direct Debit",
      subtitle: "Automatic collection — set and forget",
      tag: "Low fees",
      tagColor: "bg-trust-blue/10 text-trust-blue",
      detail: "We'll collect via GoCardless",
    },
    {
      id: "card" as const,
      icon: CreditCard,
      title: "Card Payment via Stripe",
      subtitle: "Pay now by Visa, Mastercard, Amex",
      tag: "Stripe",
      tagColor: "bg-purple-100 text-purple-700",
      detail: "Secure payment powered by Stripe",
    },
    {
      id: "fpx" as const,
      icon: Globe,
      title: "FPX Online Banking",
      subtitle: "Pay via Malaysian bank account",
      tag: "Malaysia",
      tagColor: "bg-amber-500/10 text-amber-700",
      detail: "Instant payment from 18 Malaysian banks",
    },
  ]

  return (
    <div className="max-w-md mx-auto pt-4 space-y-6">
      <div className="text-center space-y-2">
        <h1 className="text-2xl font-extrabold text-gray-900">
          How would you like to pay?
        </h1>
        <p className="text-lg text-muted-foreground">
          Pledge: <span className="font-bold text-foreground">£{pounds}</span>
        </p>
      </div>

      <div className="space-y-3">
        {options.map((opt) => (
          <button
            key={opt.id}
            onClick={() => onSelect(opt.id)}
            className="w-full text-left tap-target rounded-2xl border-2 border-gray-200 bg-white p-5 hover:border-trust-blue/50 active:scale-[0.99] transition-all group"
          >
            <div className="flex items-start gap-4">
              <div className="rounded-xl bg-trust-blue/5 p-3 group-hover:bg-trust-blue/10 transition-colors">
                <opt.icon className="h-6 w-6 text-trust-blue" />
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2">
                  <span className="font-bold text-gray-900">{opt.title}</span>
                  {opt.tag && (
                    <span className={`text-xs font-semibold px-2 py-0.5 rounded-full ${opt.tagColor}`}>
                      {opt.tag}
                    </span>
                  )}
                </div>
                <p className="text-sm text-muted-foreground mt-0.5">{opt.subtitle}</p>
                <p className="text-xs text-muted-foreground/70 mt-1">{opt.detail}</p>
              </div>
              <div className="text-muted-foreground/40 group-hover:text-trust-blue transition-colors text-xl">
                →
              </div>
            </div>
          </button>
        ))}
      </div>
    </div>
  )
}