import ItemDoctor from "@/app/component/ItemDoctor";
import Pagination from "@/app/component/Pagination";

function List({ doctors }) {
  return (
    <>
      <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-[40px] gap-[16px] md:gap-[20px] lg:gap-[24px]">
        {doctors.map((doctor) => (
          <ItemDoctor key={doctor.id} doctor={doctor} />
        ))}
      </ul>
      <div className="mt-[56px] flex justify-center">
        <Pagination list={doctors} itemsPerPage={12} />
      </div>
    </>
  );
}

export default List;
