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

export default function PaymentDetails() {
  return (
    <div className="space-y-4">
      <h3 className="font-medium text-lg mb-4">รายละเอียดการชำระเงิน</h3>
      
      <div className="border rounded-lg p-4">
        <div className="flex items-center gap-3 mb-4">
          <CreditCard className="w-5 h-5 text-gray-600" />
          <span className="font-medium">บัตรเครดิต/เดบิต</span>
        </div>
        <div className="space-y-3">
          <input
            type="text"
            placeholder="หมายเลขบัตร"
            className="w-full border rounded-lg px-3 py-2"
          />
          <div className="grid grid-cols-2 gap-3">
            <input
              type="text"
              placeholder="MM/YY"
              className="border rounded-lg px-3 py-2"
            />
            <input
              type="text"
              placeholder="CVV"
              className="border rounded-lg px-3 py-2"
            />
          </div>
          <input
            type="text"
            placeholder="ชื่อบนบัตร"
            className="w-full border rounded-lg px-3 py-2"
          />
        </div>
      </div>

      <div className="border rounded-lg p-4">
        <div className="flex items-center gap-3">
          <Smartphone className="w-5 h-5 text-gray-600" />
          <span className="font-medium">QR Code / PromptPay</span>
        </div>
        <p className="text-sm text-gray-500 mt-2">
          ชำระเงินผ่าน QR Code ด้วยแอปธนาคารหรือ PromptPay
        </p>
      </div>

      <div className="flex items-center gap-2 text-sm text-gray-500">
        <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
          <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
        </svg>
        <span>การชำระเงินของคุณปลอดภัยและเข้ารหัส 256-bit SSL</span>
      </div>
    </div>
  );
}