import React from "react";
import toast from "react-hot-toast";

export default function PaymentModal({ isOpen, onClose, amount }) {
  if (!isOpen) return null;

  const handlePayment = () => {
    toast.error("微信支付接口调用失败");
    onClose();
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
      <div className="bg-white w-[90%] max-w-md rounded-lg">
        <div className="p-4 border-b">
          <div className="flex justify-between items-center">
            <h3 className="text-lg font-medium">支付方式</h3>
            <button onClick={onClose} className="text-gray-400">
              ✕
            </button>
          </div>
        </div>

        <div className="p-4">
          <div className="text-center mb-4">
            <p>支付金额</p>
            <p className="text-xl font-bold">{amount.toFixed(2)}元</p>
          </div>

          <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg mb-4">
            <div className="flex items-center">
              <svg
                className="w-6 h-6 mr-3 text-[#07c160]"
                viewBox="0 0 28 28"
                fill="currentColor"
              >
                <path d="M9.442 15.027c-0.12 0.060-0.239 0.088-0.359 0.088-0.239 0-0.458-0.109-0.598-0.309l-0.050-0.070-2.157-4.633c-0.020-0.040-0.020-0.070-0.020-0.109 0-0.199 0.159-0.359 0.359-0.359 0.080 0 0.149 0.020 0.219 0.060l2.546 1.796c0.189 0.129 0.408 0.199 0.648 0.199 0.189 0 0.369-0.050 0.527-0.139l12.036-7.284c-2.267-2.616-5.821-4.314-9.843-4.314-7.005 0-12.69 5.247-12.69 11.721 0 3.514 1.796 6.668 4.593 8.743 0.219 0.159 0.359 0.408 0.359 0.697 0 0.080-0.020 0.159-0.040 0.229-0.129 0.478-0.349 1.264-0.359 1.294-0.020 0.070-0.040 0.149-0.040 0.219 0 0.199 0.159 0.359 0.359 0.359 0.070 0 0.139-0.020 0.199-0.070l2.367-1.365c0.189-0.109 0.408-0.169 0.627-0.169 0.109 0 0.229 0.020 0.329 0.050 1.614 0.478 3.347 0.737 5.148 0.737 7.005 0 12.69-5.247 12.69-11.721 0-1.944-0.548-3.769-1.505-5.375l-14.342 8.693z" />
              </svg>
              <span>微信支付</span>
            </div>
            <div className="w-6 h-6 rounded-full border-2 border-yellow-400 flex items-center justify-center">
              <div className="w-3 h-3 bg-yellow-400 rounded-full"></div>
            </div>
          </div>

          <button
            className="w-full bg-yellow-400 text-white py-3 rounded-full"
            onClick={handlePayment}
          >
            确认支付
          </button>
        </div>
      </div>
    </div>
  );
}