import useSWR from "swr";
import Button from "../button";
import CardPrice from "../plan-card/card-price";
import { getPrices } from "@/utils/actions";
import { TPlanName, TPrice } from "@/types";
import Preloader from "../preloader";
import { plans } from "@/utils/planes";

type PlanesFooterProps = {
  planName: TPlanName;
};

const PlanesFooter = ({ planName }: PlanesFooterProps) => {
  const { data, isLoading } = useSWR("/prices", getPrices);
  const currentPlan = Array.isArray(data) && data?.find((plan) => plan.name === planName);
  const currentTitle = plans.find((plan) => plan.name === planName)?.nameStatic;
  return (
    <div className="px-4 py-6 md:px-0 md:pb-0 left-0 flex gap-4 flex-wrap justify-between md:justify-end items-center w-full md:ml-auto absolute bottom-0 md:relative md:bottom-[initial] bg-white [box-shadow:-0.125rem_-0.125rem_0.5rem_0px_rgba(0,_0,_0,_0.05)] md:shadow-none">
      {isLoading ? (
        <Preloader className="text-light-blue/20 scale-75 w-20 -top-7 md:top-0 left-1/2 -translate-x-1/2 md:left-0 md:transform-none" />
      ) : (
        <>
          <div className="flex items-center gap-2">
            <CardPrice
              price={(currentPlan as TPrice)?.price as number}
              duration={1000}
              className="text-[min(8vw,2.5rem)]/none"
            />

            <span className="text-base">mensual</span>
          </div>

          <Button
            text="Lo quiero"
            type="outlined"
            className="px-[2rem] text-light-blue hover:bg-light-blue hover:text-white"
            disabled={!Array.isArray(data)}
            href={`/?showDialog=phone&plan=${currentTitle}`}
          />
        </>
      )}
    </div>
  );
};

export default PlanesFooter;