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

import kycRequire from "../../../public/img/aleta-payment-kyc-require.png";
import rejectedIcon from "../../../public/img/aleta-payment-rejected.png";
import { ROUTES } from "../../constants/routes";
import useCustomRouter from "../../hooks/useCustomRouter";
import ButtonCustom from "../Button";
import CustomNextImage from "../CustomNextImage";

export function KycRejectedStatus() {
  const { push } = useCustomRouter();
  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={rejectedIcon.src}
              alt={"kyc require"}
            />
            <CustomNextImage
              className="mb-[40px]"
              width={46}
              height={55}
              src={kycRequire.src}
              alt={"kyc Require"}
            />
          </div>
          <Typography
            variant="paragraph"
            className="max-w-[400px] mb-[70px] font-semibold text-[#FF2727]"
          >
            {`Sorry, your KYC was rejected.`}
          </Typography>
          <div className="flex justify-center">
            <ButtonCustom
              icon={undefined}
              onClick={() => {
                push(ROUTES.aleta.aletaStatus);
              }}
            >
              Visit KYC page
            </ButtonCustom>
          </div>
        </div>
      </div>
    </>
  );
}
