'use client';
import { useState } from "react";
import { productList } from "@/data/productList";
import ProductItem from "@/components/shared/ProductItem";

const PRODUCT_PER_PAGE = 30;

export default function ProductList( {id} : any) {
    
    const productsFilter = productList.find(item => item.id === id)?.list || [];
    const total = productsFilter?.length;

    const [page, setPage] = useState(1);
    const displayCount    = page * PRODUCT_PER_PAGE;
    const hasMore         = displayCount < total;
    const products        = productsFilter.slice(0, displayCount);    

    return (
        <>
        <div className="product-holder grid grid-cols-4 gap-x-5 gap-y-8 mb-6">
            {products.map((item: any) => (
                <ProductItem key={item.id} item={item} />
            ))}
        </div>

        { hasMore &&
            <div className="text-center mt-12">
                <button type="button" aria-label="Xem thêm"
                    className="mb-3 bg-btn text-white rounded-[30px] h-10 font-500 text-16 table max-w-[240px] w-full m-auto mb-3"                    
                    onClick={() => setPage(prev => prev + 1)}
                >
                    TẢI THÊM
                </button>
                <p className="text-14 leading-[18px] m-0">
                    Hiển thị {Math.min(displayCount, total)} trên tổng số {total} sản phẩm
                </p>
            </div>
        }
        </>
    )
}