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

import subscriptionRequired from "../../../public/img/aleta-payment-subscription-required.png";
import { ROUTES } from "../../constants/routes";
import useCustomRouter from "../../hooks/useCustomRouter";
import ButtonCustom from "../Button";
import CustomNextImage from "../CustomNextImage";

export function SubscriptionRequiredStatus() {
  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={subscriptionRequired.src}
              alt={"subscription require"}
            />
          </div>
          <Typography
            variant="paragraph"
            className="max-w-[400px] mb-[70px] font-semibold"
          >
            {`We’re excited to get your Aleta wallet ready. Let's first quickly setup your wallet.`}
          </Typography>
          <div className="flex justify-center">
            <ButtonCustom
              icon={undefined}
              onClick={() => {
                push(ROUTES.aleta.aletaFee);
              }}
            >
              Go to Setup
            </ButtonCustom>
          </div>
        </div>
      </div>
    </>
  );
}
