"use client";

import { ToggleSwitcher } from "@/components/ui";
import { useState } from "react";
import { Accordion, TablaPlanes } from "./components";
import { Plan, Servicios } from "./types";
import { AnimatePresence, motion } from "motion/react";

type PlanesContainerProps = {
  data: Plan[];
};

export const PlanesContainer = ({ data }: PlanesContainerProps) => {
  const [currentOption, setCurrentOption] = useState("Ver planes");
  const options = ["Ver planes", "Comparar planes"];

  const getList = (rawList: Servicios[]): string[] => {
    return rawList.map((s) => `${s.name}${s.label ? `(${s.label})` : ""}`);
  };

  return (
    <div className="my-8 md:my-10 contigo-container">
      <div className="w-4/5 sm:w-2/5 mx-auto mb-8 md:mb-10">
        <ToggleSwitcher options={options} handleClick={setCurrentOption} selectedTab={currentOption} />
      </div>
      <AnimatePresence mode="wait">
        {currentOption === "Ver planes" ? (
          <motion.div
            key="ver"
            initial={{ opacity: 0, x: -12 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: 12 }}
            transition={{ duration: 0.25 }}
            className="space-y-8"
          >
            {data.map((plan) => (
              <Accordion
                key={plan.id}
                title={plan.titulo}
                description={plan.descripcion}
                price={plan.precio}
                list1={getList(plan.servicios_incluidos)}
                list2={getList(plan.servicios_copago)}
              />
            ))}
          </motion.div>
        ) : (
          <motion.div
            key="comparar"
            initial={{ opacity: 0, x: 12 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -12 }}
            transition={{ duration: 0.25 }}
          >
            <TablaPlanes plans={data} />
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};

export default PlanesContainer;