import ModalShell from "./ModalShell";
import WalletIcon from "../Icon/WalletIcon";
import transfer from "../../assets/transfer.svg";

//import SolanaIcon from "../Icon/SolanaIcon";

export type IWalletOptionModalProps = {
  show: boolean;
  onCancel: () => void;
  title: string;
  loading?: boolean;
  sendPayment: (option: "solana" | "wallet-connect") => void;
};

const WalletOptionModal = ({
  show = false,
  onCancel,
  title = "",
  sendPayment,
}: IWalletOptionModalProps) => {
  return (
    <ModalShell
      title={title}
      show={show}
      style={{ padding: 0 }}
      cancel={onCancel}
      width={400}
    >
      <div>
        <button
          style={{ borderBottom: "1px solid #f0f0f0" }}
          className="text-left"
          onClick={() => sendPayment("solana")}
        >
          <div className="p-8 flex gap-5">
            <div className="w-[60px] relative h-[60px] p-[30px] rounded-[50%] bg-[#2C3489]">
              <div className="absolute left-1/4 top-1/4">
                <img src={transfer} alt="solana" />
              </div>
            </div>
            <div>
              <p className="text-[#2C3489] font-bold">Crypto Transfer</p>
              <p className="text-[12px] text-[#2C3489] leading-[16px] ">
                Send cryptocurrency to the business's wallet address on the
                Solana network.
              </p>
            </div>
          </div>
        </button>
        <button
          style={{ borderBottom: "1px solid #f0f0f0" }}
          className="text-left"
          onClick={() => sendPayment("wallet-connect")}
        >
          <div className="p-8 flex gap-5">
            <WalletIcon />
            <div>
              <p className="text-[#2C3489] font-bold">Crypto Wallet</p>
              <p className="text-[12px] text-[hsl(235,51%,35%)] leading-[16px] ">
                Connect your preferred crypto wallet and pay with ease.
              </p>
            </div>
          </div>
        </button>
      </div>
    </ModalShell>
  );
};
export default WalletOptionModal;