import doctors from '@/data/doctors.json'
import Pagination from '@/app/component/Pagination';
import ItemDoctor from '@/app/component/ItemDoctor';

function ListDoctors() {
    return (
        <>
            <ul className="grid grid-cols-1 md:grid-cols-2 lg: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 />
            </div>
        </>
    )
}

export default ListDoctors