import { CreditCard, Wallet } from 'lucide-react';

interface PaymentMethodProps {
  value: 'payso' | 'stripe';
  onChange: (value: 'payso' | 'stripe') => void;
  onContinue: () => void;
  isProcessing: boolean;
}

export default function PaymentMethod({ value, onChange, onContinue, isProcessing }: PaymentMethodProps) {
  return (
    <div className="space-y-6">
      <div className="space-y-4">
        <label className="block text-sm font-medium">เลือกวิธีการชำระเงิน</label>
        
        <div
          onClick={() => onChange('payso')}
          className={`p-4 border rounded-lg cursor-pointer transition-colors ${
            value === 'payso' ? 'border-blue-600 bg-blue-50' : 'border-gray-200 hover:border-gray-300'
          }`}
        >
          <div className="flex items-center gap-4">
            <div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
              value === 'payso' ? 'border-blue-600' : 'border-gray-300'
            }`}>
              {value === 'payso' && <div className="w-3 h-3 rounded-full bg-blue-600" />}
            </div>
            <Wallet className="w-6 h-6 text-blue-600" />
            <div className="flex-1">
              <p className="font-medium">PaySo</p>
              <p className="text-sm text-gray-500">พร้อมเพย์, บัตรเครดิต, QR Code</p>
            </div>
          </div>
        </div>

        <div
          onClick={() => onChange('stripe')}
          className={`p-4 border rounded-lg cursor-pointer transition-colors ${
            value === 'stripe' ? 'border-blue-600 bg-blue-50' : 'border-gray-200 hover:border-gray-300'
          }`}
        >
          <div className="flex items-center gap-4">
            <div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
              value === 'stripe' ? 'border-blue-600' : 'border-gray-300'
            }`}>
              {value === 'stripe' && <div className="w-3 h-3 rounded-full bg-blue-600" />}
            </div>
            <CreditCard className="w-6 h-6 text-purple-600" />
            <div className="flex-1">
              <p className="font-medium">Stripe</p>
              <p className="text-sm text-gray-500">บัตรเครดิต/เดบิต ทั่วโลก</p>
            </div>
          </div>
        </div>
      </div>

      <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
        <p className="text-sm text-yellow-800">
          <strong>หมายเหตุ:</strong> การชำระเงินทุกช่องทางมีความปลอดภัยสูง ข้อมูลบัตรของคุณจะไม่ถูกเก็บบนเซิร์ฟเวอร์ของเรา
        </p>
      </div>

      <button
        onClick={onContinue}
        disabled={isProcessing}
        className="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 disabled:opacity-50"
      >
        {isProcessing ? 'กำลังประมวลผล...' : 'ดำเนินการต่อ'}
      </button>
    </div>
  );
}
