import React from "react";
import { Loader } from "@/components/Loader";
import MkdSDK from "@/utils/MkdSDK";
import { Link } from "react-router-dom";
import SkeletonLoader from "@/components/Skeleton/Skeleton";

const sdk = new MkdSDK();

const Pay = () => {
  const [loading, setLoading] = React.useState(true);
  const [paymentLinks, setPaymentLinks] = React.useState([]);

  console.log(loading);

  React.useEffect(() => {
    const interval = setTimeout(() => {
      setLoading(false);
    }, 5000);

    (async () => {
      let res = await sdk.getStripePaymentLinks();
      if (!res.error) {
        console.log("res :>> ", res);
        setPaymentLinks(res.list);
      }
    })();
  }, []);

  return (
    <>
      {loading ? (
        <SkeletonLoader />
      ) : (
        <div className="flex w-full text-7xl  text-gray-700 ">
          {/* ====== Pricing Section Start */}
          <section className="relative z-20 overflow-hidden bg-white pb-12 pt-20 lg:pb-[90px] lg:pt-[120px]">
            <div className="container mx-auto">
              <div className="-mx-4 flex flex-wrap">
                <div className="w-full px-4">
                  <div className="mx-auto mb-[60px] max-w-[510px] text-center lg:mb-20">
                    <span className="mb-2 block text-lg font-semibold text-primary">
                      Pricing Table
                    </span>
                  </div>
                </div>
              </div>

              <div className="flex">
                {paymentLinks.map((link, index) => (
                  <div
                    key={index}
                    className="mx-4 flex flex-wrap justify-center"
                  >
                    <div className="">
                      <div className="shadow-pricing relative mb-10 overflow-hidden rounded-xl border border-primary border-opacity-20 bg-white px-8 py-10 sm:p-12 lg:px-6 lg:py-10 xl:p-12">
                        <span className="mb-4 block text-lg font-semibold text-primary">
                          {link.metadata.name}
                        </span>
                        <h2 className="text-dark mb-5 text-[42px] font-bold">
                          {link.metadata.price}
                          <span className="text-body-color text-base font-medium">
                            {" "}
                            / {link.metadata.interval}{" "}
                          </span>
                        </h2>
                        <Link
                          to={link.url}
                          className="bg-slate-800 px-8 py-4 text-xl font-bold text-secondary-300"
                          role="button"
                        >
                          Buy
                        </Link>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </section>
          {/* ====== Pricing Section End */}
        </div>
      )}
    </>
  );
};

export default Pay;
