import { TPlanNameStatic } from "@/types";
import { plans } from "@/utils/planes";
import { cn } from "clsx-tailwind-merge";
import { motion } from "framer-motion";
import Link from "next/link";

type PlanesTabProps = {
  active: TPlanNameStatic | null;
  setActive: React.Dispatch<React.SetStateAction<TPlanNameStatic | null>>;
};

const PlanesTabs = ({ active, setActive }: PlanesTabProps) => {
  return (
    <ul className="bg-light-gray w-full md:max-w-[35rem] mx-auto md:rounded-[0.25rem] p-2 flex gap-2 md:gap-4 justify-between items-center mawdy-box-shadow relative mawdy-scrollbar overflow-auto">
      {plans.map((tab) => (
        <li
          key={tab.name}
          className="whitespace-nowrap text-[0.875rem] p-1 flex-1 text-center relative"
          onClick={() => setActive(tab.nameStatic)}
        >
          {active === tab.nameStatic && (
            <motion.span
              layoutId="active"
              className="absolute h-full bg-light-blue z-0 block inset-0 rounded-[0.25rem]"
            />
          )}
          <Link
            href={`?showDialog=planes&plan=${tab.nameStatic}`}
            scroll={false}
            className={`${cn("relative transition-colors duration-300 delay-100", {
              "pointer-events-none text-white": active === tab.nameStatic,
            })}`}
          >
            {tab.title}
          </Link>
        </li>
      ))}
    </ul>
  );
};

export default PlanesTabs;