import { Modal } from 'antd';
import { create } from 'zustand';

interface PayModalStore {
  open: boolean;
  setOpen: (open: boolean) => void;
  money: number;
  setMoney: (money: number) => void;
}
export const usePayModalStore = create<PayModalStore>((set) => ({
  open: false,
  setOpen: (open: boolean) => set({ open }),
  money: 0,
  setMoney: (money: number) => set({ money }),
}));

export const PayModal = () => {
  const { open, setOpen, money } = usePayModalStore();
  return (
    <Modal open={open} onCancel={() => setOpen(false)} maskClosable={false} footer={null}>
      <div className='px-4 py-4 flex flex-col gap-4 select-none'>
        <h2 className='text-2xl font-bold mb-4'>支付确认</h2>
        <p className='text-lg'>请确认支付金额：{money} 元</p>
        <div className='flex gap-2'>
          <button className='bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 cursor-pointer'>微信支付</button>
          <button className='bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 cursor-pointer'>支付宝支付</button>
        </div>
      </div>
    </Modal>
  );
};