import { CommentData } from "@/data/comments";
import Form from "./Form";
import CommentList from "./CommentList";

export default function Comment() {

    return (
        <div>
            <div className="flex items-center justify-between leading-8 gap-2 mb-4">
                <p className="m-0 text-18 font-500"> {CommentData.list.length} Bình luận </p>

                <div className="flex flex-wrap gap-2 text-14 font-500 pd-comment-btn">
                    <button type="button" aria-label="Đánh giá"
                        className="h-8 border border-[#D1D5DB] rounded-[40px] flex items-center gap-[3px] px-8 hover:border-[#0678DB] hover:text-[#0678DB] current"
                    > Tất cả </button>

                    {buildButtonFilter()}
                </div>
            </div>

            <div className="border border-[#DDDDDD] rounded-[12px] overflow-hidden js-comment-form">
                <Form />
            </div>            

            {CommentData.list.length > 0 &&
                <CommentList item={CommentData.list}/>
            }
        </div>
    )
}

function buildButtonFilter(){
    const star = [5,4,3,2,1]
    
    return star.map(item => (
        <button type="button" aria-label="Đánh giá" key={item}
            className="h-8 border border-[#D1D5DB] rounded-[40px] flex items-center gap-[3px] px-4 hover:border-[#0678DB] hover:text-[#0678DB]"
        > {item} <i className="bxr bx-star" /> </button>
    ))
}