"use client";
import { useQuery } from "@tanstack/react-query";
import httpClient from "@/request/api";
import { endPoints } from "@/request/links";
import CatalogCard from "../../products/catalog";
import CatalogCardSkeleton from "@/components/loadingSkleton";
import EmptyData from "@/components/EmptyData";
import { getRouteLang } from "@/request/getLang";
import { CategoryType } from "@/lib/types";

export default function Catalog() {
  const language = getRouteLang();
  const { data, isLoading } = useQuery({
    queryKey: ["category", language],
    queryFn: () => httpClient(endPoints.category.all),
    select: (data): CategoryType[] => data?.data?.results,
  });

  if (isLoading) {
    return (
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {[...Array(3)].map((_, index) => (
          <CatalogCardSkeleton key={index} />
        ))}
      </div>
    );
  }

  // Ma'lumot yo'q holati
  if (!data || data.length === 0) {
    return (
      <EmptyData
        title="Katalog topilmadi"
        description="Hozircha kategoriyalar mavjud emas. Keyinroq qaytib keling."
        icon="shopping"
      />
    );
  }

  return (
    <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3 place-items-center">
      {data.map((item, index) => (
        <CatalogCard
          key={index}
          id={item.id}
          title={item.name}
          description={item.description}
          image={item.image}
          have_sub_category={item.have_sub_category}
        />
      ))}
    </div>
  );
}