"use client";
import { products } from "@/interfaces/types";
import ProductCard from "@/shared/card/ProductCard";
import AppPagination from "@/shared/Pagination/AppPagination";
import { updateURLParams } from "@/utils/helpers";
import { usePathname } from "next/navigation";
import { useRouter } from "nextjs-toploader/app";
import { useRef } from "react";

type Props = {
  products: products[];
  paggination: any;
  current_page: number;
};

export default function ProductsDetails({
  products,
  paggination,
  current_page,
}: Props) {
  const router = useRouter();
  const pathname = usePathname();
  const containerRef = useRef<HTMLDivElement | null>(null);

  const handlePaggination = (selectedPage: any) => {
    updateURLParams({
      params: { page: selectedPage },
      router: router,
      pathname: pathname,
    });
    setTimeout(() => {
      if (containerRef.current) {
        containerRef.current.scrollIntoView({
          behavior: "smooth",
          block: "start",
        });
      }
    }, 300);
  };
  return (
    <div ref={containerRef}>
      {/* <div className="flex items-center justify-between mb-6">
        <p className="text-text-secondary">عرض جميع المنتجات</p>
        <button className="flex items-center gap-2 px-4 py-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="18"
            height="18"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="lucide lucide-funnel"
          >
            <path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"></path>
          </svg>
          <span>تصفية</span>
        </button>
      </div> */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        {products?.map((product) => (
          <div key={product.id}>
            <ProductCard product={product} />
          </div>
        ))}
      </div>

      {products?.length > 0 && (
        <div className="py-8">
          <AppPagination
            itemsPerPage={paggination?.per_page}
            totalItems={paggination?.total}
            totalPage={paggination?.last_page}
            currentPage={+current_page}
            paginate={handlePaggination}
          />
        </div>
      )}
    </div>
  );
}