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

const COMMENT_PER_PAGE = 5;

export default function CommentList( {item}:any ) {
    const total = item?.length;
    
    const [page, setPage] = useState(1);
    const displayCount    = page * COMMENT_PER_PAGE;
    const hasMore         = displayCount < total;
    const commentData      = item.slice(0, displayCount);
    
    return (
        <>
        <div>
            {
                commentData.map( (comment:any) => <CommentItem item={comment} key={comment.id} />)
            }
        </div>

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