"use client";

import dynamic from "next/dynamic";
import { useMediaQuery } from "@/hooks/useMediaQuery";
import { OurPlansGrid } from "@/components/homepage/";
import { Plan } from "@/components/planes/types";

const OurPlansSlider = dynamic(() => import("./our-plans-slider"), { ssr: false });

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

const ResponsivePlanes = ({ plans }: ResponsivePlanesProps) => {
  const isDesktop = useMediaQuery("(min-width: 768px)", {
    defaultValue: true,
    initializeWithValue: false,
  });

  return isDesktop ? <OurPlansGrid plans={plans} /> : <OurPlansSlider plans={plans} />;
};

export default ResponsivePlanes;