"use client";

import { GalleryCard } from "@/components/general";
import { useMediaQuery } from "@/hooks/useMediaQuery";
import { cn } from "@/lib/utils";
import dynamic from "next/dynamic";
import { StaticImageData } from "next/image";

export type GalleryBase = {
  img: {
    src: StaticImageData;
    alt: string;
  };
  title: string;
  description?: string;
};

const GallerySlider = dynamic(() => import("./gallery-slider"), { ssr: false });

type GalleryContentProps<T extends GalleryBase> = {
  data: T[];
  className: string;
};

const GalleryContent = <T extends GalleryBase>({ data, className }: GalleryContentProps<T>) => {
  const isDesktop = useMediaQuery("(min-width: 768px)", {
    defaultValue: true,
    initializeWithValue: false,
  });

  return (
    <>
      {isDesktop ? (
        <div className={cn("hidden md:grid", className)}>
          {data.map((item, i) => (
            <GalleryCard<T> item={item} key={i} />
          ))}
        </div>
      ) : (
        <GallerySlider data={data} />
      )}
    </>
  );
};

export default GalleryContent;