'use client';
import { useState } from "react";
import ReviewItem from "@/components/shared/ReviewItem";

const REVIEW_PER_PAGE = 5;

export default function ReviewList({ item }: any) {
    const total = item?.length;

    const [page, setPage] = useState(1);
    const displayCount    = page * REVIEW_PER_PAGE;
    const hasMore         = displayCount < total;
    const reviewData      = item.slice(0, displayCount);

    return (
        <>
            {reviewData && 
                reviewData.map((item:any) => 
                    <ReviewItem key={item.id} item={item} />
                )
            }            

            { hasMore &&
            <div className="text-center mt-4">
                <button
                    type="button"
                    className="border border-[#0678DB] text-[#0678DB] rounded-[30px] h-10 px-6 hover:bg-[#0678DB] hover:text-white"
                    aria-label="Xem thêm"
                    onClick={() => setPage(prev => prev + 1)}
                >
                    XEM THÊM
                    <i className="bx bx-chevron-down text-20 align-middle mt-[-3px]" />
                </button>
            </div>
        }
        </>
    )
}