import { plans } from "@/utils/planes";
import { AnimatePresence, motion } from "framer-motion";
import { Fragment } from "react";
import PlanesHeader from "./planes-header";
import PlanesBodyTable from "./planes-body-table";
import { fadeInOut } from "@/utils/variants";
import PlanesFooter from "./planes-footer";

type PlanesContentProps = {
  active: string | null;
};

const PlanesContent = ({ active }: PlanesContentProps) => {
  return (
    <motion.div className="overflow-hidden h-full pr-1 pb-[5.625rem] xs:pb-[8.25rem] md:pb-0" layout="position">
      {plans
        .map((plan) => plan.nameStatic)
        .map((p, i) => (
          <Fragment key={p}>
            <AnimatePresence initial={false}>
              {active === p && (
                <motion.div
                  {...fadeInOut({ delay: 0.5 })}
                  className="h-full overflow-auto md:px-8 flex flex-col items-center mawdy-scrollbar"
                >
                  <PlanesHeader features={plans[i].modal.features} />
                  <PlanesBodyTable
                    coverages={plans[i].modal.table.coverage}
                    services_cap={plans[i].modal.table.service_cap}
                    services_per_year={plans[i].modal.table.services_per_year}
                    type={plans[i].name}
                  />
                  <PlanesFooter planName={plans[i].name} />
                </motion.div>
              )}
            </AnimatePresence>
          </Fragment>
        ))}
    </motion.div>
  );
};

export default PlanesContent;