import { Button } from '@mui/material'
import Chart from './chart'
import Comment from '@/app/component/comment'
import ModalAnswer from './modal/ModalAnswer'

function Comments({ doctor }) {
    return (
        <div className='mt-[24px] sm:mt-[27px] md:mt-[29px] lg:mt-[32px]'>
            <a
                id="comments"
                className='absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]'
            ></a>
            <p className="text-[#525252] text-[16px] md:text-[18px] lg:text-[20px] font-bold">نظرات کاربران </p>
            <div className='mt-[12px] sm:mt-[18px] md:mt-[24px] lg:mt-[32px] flex flex-col md:flex-row gap-y-[20px] items-start md:items-center justify-start'>
                <p className='text-[#616161] text-[16px] font-normal'>شما هم نظر خود را در مورد این پزشک به اشتراک بگذارید:</p>
                <ModalAnswer doctor={doctor} />
            </div>
            <Chart doctor={doctor} />
            <Comment data={doctor} />
        </div>
    )
}

export default Comments