import { Typography } from "@material-tailwind/react";
import React from "react";

import pendingIcon from "../../../public/img/aleta-payment-pending.png";
import CustomNextImage from "../CustomNextImage";

export function KycPendingStatus() {
  return (
    <>
      <div className="flex justify-center md:px-5 py-10  rounded-[12px] bg-[#F5F5F3] text-center">
        <div>
          <div className="flex justify-center">
            <CustomNextImage
              className="mb-[40px]"
              width={72}
              height={57}
              src={pendingIcon.src}
              alt={"kyc require"}
            />
          </div>
          <Typography
            variant="paragraph"
            className="max-w-[400px] mb-[70px] font-semibold"
          >
            {`Yay! We already have your KYC details.
                        Please wait while we create your wallet once the
                        verification is complete.`}
          </Typography>
        </div>
      </div>
    </>
  );
}
