import {
  Dialog,
  DialogBody,
  DialogFooter,
  DialogHeader,
  IconButton,
  Typography,
} from "@material-tailwind/react";
import React from "react";
import { IoIosCloseCircleOutline } from "react-icons/io";

import aiImage from "../../public/img/ai-dialog.png";
import ButtonCustom from "./Button";
import CustomNextImage from "./CustomNextImage";

export function AiPaymentDialog({ handleOpen, open, action }) {
  return (
    <>
      <Dialog
        size="xs"
        open={open}
        handler={handleOpen}
        className=" px-3 xl:px-5  py-4 boostDialogBg"
      >
        <DialogHeader className="justify-center">
          <IconButton
            size="sm"
            variant="text"
            className="!absolute right-3 top-3 outline-none"
            onClick={async () => {
              handleOpen(false);
            }}
          >
            <IoIosCloseCircleOutline className="w-6 h-6 text-gray-500 cursor-pointer" />
          </IconButton>
        </DialogHeader>
        <DialogBody className="max-h-[600px] overflow-y-auto">
          <div className="flex flex-wrap-reverse justify-center xl:justify-between items-center gap-3 mb-4">
            <div>
              <Typography
                variant="paragraph"
                className="text-lg max-w-[30px] md:text-4xl font-bold text-[#9451A0] uppercase"
              >
                Important Information
              </Typography>
              <Typography
                variant="paragraph"
                className="text-sm md:text-lg text-[#E27500] max-w-[200px] font-normal"
              >
                Maintain Your NodeK Rewards{" "}
              </Typography>
            </div>
            <div>
              <CustomNextImage
                src={aiImage.src}
                alt={"boost image"}
                width={164}
                height={163}
              />
            </div>
          </div>
          <div className="mb-4">
            <Typography
              variant="paragraph"
              className="text-base text-black-900 font-normal"
            >
              To ensure your <strong>NodeK</strong> rewards remain active,
              please complete your add-on purchase within <strong>30</strong>{" "}
              days of its official launch.
            </Typography>
          </div>

          <Typography
            variant="paragraph"
            className="text-base text-[#E27500] font-normal"
          >
            After this period,{" "}
            <strong> reward accumulation will be temporarily paused </strong>{" "}
            until the purchase is completed.
          </Typography>
        </DialogBody>
        <DialogFooter className="justify-center">
          <ButtonCustom
            icon={undefined}
            onClick={() => {
              action();
            }}
          >
            Continue
          </ButtonCustom>
        </DialogFooter>
      </Dialog>
    </>
  );
}
