import CalndarD from "@/components/icons/CalndarD"
import TrashOrangeD from "@/components/icons/TrashOrangeD"
import { Button, Rating } from "@mui/material"
import Image from "next/image"
import ModalDeleteComment from "./modal"

function Comment({ data }) {
    return (
        <li
            className="flex flex-col gap-[8px] w-full"
        >
            <div className="flex items-start justify-between w-full">
                <div className="flex items-center justify-start gap-[16px]">
                    <Image
                        src={data.profile}
                        alt="profile"
                        height={87}
                        width={87}
                    />
                    <div className="flex flex-col items-start justify-center gap-[16px]">
                        <p className="text-[#3B3B3B] text-[16px] font-bold">{data.name_doctor}</p>
                        <p className="text-[#525252] text-[14px] font-medium">تخصص: {data.expertise}</p>
                    </div>
                </div>
                <ModalDeleteComment />
            </div>
            <Rating
                defaultValue={data.stars.value}
                className="!mt-[8px]"
                sx={{
                    '& .MuiSvgIcon-root': {
                        width: '16px',
                        height: '16px'
                    }
                }}
            />
            <p className="text-[#525252] text-[14px] font-normal leading-[33px]">{data.comment}</p>
            <div className="flex items-center justify-start gap-[8px]">
                <CalndarD />
                <p className="text-[#7E7E7E] text-[12px] font-normal">{data.date}</p>
            </div>
            <span className="w-full block h-px bg-[#EFEFEF]"></span>
        </li>
    )
}

export default Comment