"use client";
import { getPrices } from "@/utils/actions";
import useSWR from "swr";
import CardPrice from "../plan-card/card-price";
import { useActivePlan } from "@/hooks/useActivePlan";
import { TPrice } from "@/types";
import { plans } from "@/utils/planes";
import Preloader from "../preloader";

const TelModalPlanInfo = () => {
  const { active } = useActivePlan();
  const { data, isLoading } = useSWR("/prices", getPrices);
  const plan = Array.isArray(data) && data?.find((plan, i) => plan.name === plans[i].name);
  const planData = plans.find((p) => p.nameStatic === active);

  return (
    <div className="relative text-white mx-auto flex flex-col items-center my-auto">
      <span>{planData?.type}</span>
      <h2 className="font-bold text-[min(8vw,2.5rem)] px-4">{planData?.title}</h2>
      {isLoading ? (
        <Preloader className="text-light-blue/50 scale-75 w-20 -top-7 md:top-0 left-1/2 -translate-x-1/2 md:left-0 md:transform-none" />
      ) : (
        <CardPrice duration={0} price={(plan as TPrice)?.price} className="my-3" />
      )}
      <span>mensual</span>
    </div>
  );
};

export default TelModalPlanInfo;