"use client";

import { useInView } from "motion/react";
import { useRef } from "react";
import { plansHome } from "@/data/plans-homepage";
import { OurPlansCard } from "@/components/homepage";
import { Plan } from "@/components/planes/types";

type OurPlansGridProps = {
  plans: Plan[];
};

const OurPlansGrid = ({ plans }: OurPlansGridProps) => {
  const ref = useRef<HTMLDivElement>(null);

  const isInView = useInView(ref, {
    once: true,
    amount: 0.5,
  });

  return (
    <div
      ref={ref}
      className="pt-5 md:pt-10 relative grid grid-cols-2 gap-x-6 gap-y-16 overflow-hidden perspective-[93.75rem] transform-3d contigo-container"
    >
      {plansHome.map((card, i) => (
        <OurPlansCard
          {...{ ...card, titulo: plans[i].titulo, price: plans[i].precio }}
          key={i}
          delay={0.1 * i}
          isInView={isInView}
        />
      ))}
    </div>
  );
};

export default OurPlansGrid;