class CommentUserItem extends HTMLElement {
    constructor() {
        super()

        let userDetails = JSON.parse(this.getAttribute("data-details"))
        this.innerHTML = this._template(userDetails)
    }

    _template({
        userImg,
        name,
        nickName,
        num,
        isAlready
    }) {
        let textAlready = "already";
        if (!isAlready) textAlready = "Querl";
        return /* html */ `
        <div class="flex flex-nowrap commentItems h-[12rem] gap-3 justify-center">
            <div class="w-[7rem] h-[7rem] relative border-4 border-[#9ecdc4] rounded-full bg-white group
            before:content-[''] before:absolute before:left-1/2 before:-translate-x-1/2 before:-bottom-[4rem] before:border-[2.5rem] before:border-transparent before:border-t-[#9ecdc4] before:w-1 before:h-1
            ">
                <!-- image -->
                <img src="${userImg}" class="w-full h-full bg-[#9ecdc4] rounded-full grid place-items-center relative z-2" />
                
                <div class="shadow  shadow-white/60  w-7 h-7 bg-[#9ecdc4] right-0 text-dark text-sm absolute bottom-2 rounded-full group-hover:w-full overflow-hidden transition-all duration-150 pr-[.6rem]">
                    <div class="flex flex-nowrap items-center w-full h-full min-w-[4rem] float-right gap-2">
                        <p class=" block w-[90%] group-hover:w-full text-center transition-all duration-150 text-sm float-right">${textAlready}</p>
                        ${!isAlready ? `<i class="fa-solid fa-wand-sparkles fa-sm"></i>` : '<i class="fa-solid fa-check fa-sm"></i>'}
                    </div>
                </div>

                <!-- text1 sm -->
                <p class="text-[#9ecdc4] text-xs absolute -bottom-[2.5rem] w-full block text-center">${name}</p>
                <!-- text2 hover -->
                <p class="text-transparent text-base absolute -bottom-[4rem] font-bold w-full group-hover:text-black text-center transition-all duration-150 ">${nickName}</p>
            </div>

            <div class="w-[3rem] h-[3rem] rounded-full border-2 border-[#9ecdc4] grid place-items-center mt-6 text-[#9ecdc4]">${num}</div>
        </div>
    `
    }
}

customElements.define("comment-useritem", CommentUserItem)