import doctors from '@/data/doctors.json'
import ItemDoctor from './ItemDoctor';
import { Pagination } from '@mui/material';

function ListDoctors() {
    return (
        <div>
            <ul className="grid grid-cols-3 mt-[64px] gap-[24px]">
                {doctors.map(doctor => (
                    <ItemDoctor
                        key={doctor.id}
                        doctor={doctor}
                    />
                ))}
            </ul>
            <div className='mt-[56px] flex justify-center'>
                <Pagination
                    // count={doctors.length / 12} org
                    count={20} // test
                    color='primary'
                    sx={{
                        '& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root': {
                            color: '#616161',
                            fontSize: '16px',
                            fontWeight: '500'
                        },
                        '& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root.Mui-selected': {
                            color: '#F8F8FF'
                        }
                    }}
                />
            </div>
        </div>
    )
}

export default ListDoctors