"use client";
import { useActivePlan } from "@/hooks/useActivePlan";
import CloseButton from "../ui/close-button";
import PlanesContent from "../ui/plan-modal/planes-content";
import PlanesTabs from "../ui/plan-modal/planes-tabs";
import { LayoutGroup, motion } from "framer-motion";
import { cn } from "clsx-tailwind-merge";
import { TPlanNameStatic } from "@/types";

const classes = {
  AsistenciaVialPlus: "md:h-[33.5rem]",
  AsistenciaVial: "md:h-[35.625rem]",
  AsistenciaSalud: "md:h-[40.625rem]",
  AsistenciaHogar: "md:h-[47.5rem]",
};

const PlanesModal = () => {
  const { active, setActive } = useActivePlan();

  return (
    <LayoutGroup>
      <motion.div
        className={cn(
          "bg-white rounded-lg md:py-8 w-[min(95%,52.125rem)] max-h-[90dvh] grid grid-rows-[auto_1fr] relative overflow-hidden",
          classes[active as TPlanNameStatic]
        )}
        layout
        transition={{ delay: 0.1, duration: 0.5, type: "spring" }}
        exit={{ opacity: 0, transition: { type: "tween" } }}
      >
        <motion.div
          className="flex-wrap flex items-center pt-4 md:p-0 justify-between md:justify-end md:flex-nowrap md:flex-row-reverse overflow-hidden"
          layout="position"
        >
          <div className="flex items-center justify-between w-full px-4 md:w-auto md:pl-0 md:pr-6">
            <h3 className="md:hidden text-[1.25rem]/[1.1]">Detalles del plan</h3>
            <CloseButton />
          </div>
          <motion.div className="w-full my-5" layout="position">
            <PlanesTabs active={active} setActive={setActive} />
          </motion.div>
        </motion.div>
        <PlanesContent active={active} />
      </motion.div>
    </LayoutGroup>
  );
};

export default PlanesModal;