"use client";

import { useQuery } from "@tanstack/react-query";
import { MapsetCard } from "../../mapset-card";
import mapsetApi from "@/shared/services/mapset";

export default function HighlightMapset() {
  const { data: mapsets, isLoading } = useQuery({
    queryKey: ["mapsets-highlight"],
    queryFn: () =>
      mapsetApi
        .getMapsets(
          {
            limit: 3,
            filter: JSON.stringify([
              "is_active=true",
              "is_popular=true",
              "status_validation=approved",
            ]),
          },
          { skipAuth: true },
        )
        .then((res) => {
          return res.items;
        }),
    staleTime: 5000,
  });

  if (isLoading) {
    return (
      <div className="mt-20 grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:gap-9">
        {[...Array(3)].map((_, index) => (
          <div key={index} className="animate-pulse">
            <div className="h-64 rounded-lg bg-gray-200"></div>
          </div>
        ))}
      </div>
    );
  }

  if (!mapsets || mapsets.length === 0) {
    return <></>;
  }

  return (
    <div className="mt-20 grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:gap-9">
      {mapsets.slice(0, 3).map((mapset) => (
        <div key={mapset.id}>
          <MapsetCard mapset={mapset} />
        </div>
      ))}
    </div>
  );
}