"use client";
import { useTranslations } from "next-intl";
import DownloadCard from "./card";
import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import httpClient from "@/request/api";
import { endPoints } from "@/request/links";
import PaginationLite from "@/components/paginationUI";
import { DownloadCardSkeleton } from "./loading/guidLoading";

export function Guides() {
  const t = useTranslations();
  const [currentPage, setCurrentPage] = useState(1);
  const guides = [
    {
      file: "/varnix.pdf",
      name: t("about.notePPPage.varnix"),
      file_type: "PDF",
      file_size: "368.51 KB",
    },
    {
      file: "/ppFlanes.pdf",
      name: t("about.notePPPage.ppFlanes"),
      file_type: "PDF",
      file_size: "368.51 KB",
    },
    {
      file: "/ppFiting.pdf",
      name: t("about.notePPPage.ppFiting"),
      file_type: "PDF",
      file_size: "368.51 KB",
    },
  ];

  const { data, isLoading } = useQuery({
    queryKey: ["guides"],
    queryFn: () => httpClient(endPoints.guides),
    select: (res) => ({
      results: res.data?.data?.results,
      current_page: res.data?.data?.current_page,
      total_pages: res.data?.data?.total_pages,
    }),
  });

  const guidedata = data?.results ?? guides;

  return (
    <div className="space-y-4">
      <div className="grid lg:grid-cols-3 min-[580px]:grid-cols-2 grid-cols-1  gap-4 max-w-7xl mx-auto py-5">
        {isLoading ? (
          <DownloadCardSkeleton />
        ) : (
          guidedata.map((guide: any, index: number) => (
            <DownloadCard
              key={index}
              title={guide.name}
              fileType={guide.file_type}
              fileSize={guide.file_size}
              fileUrl={guide.file}
            />
          ))
        )}
      </div>
      {data?.total_pages > 1 && (
        <PaginationLite
          currentPage={currentPage}
          totalPages={data?.total_pages}
          onChange={setCurrentPage}
        />
      )}
    </div>
  );
}