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

function ListDoctors({ doctors, setDoctors }) {
  return (
    <>
      <div className="mt-[24px] sm:mt-[37px] md:mt-[50px] lg:mt-[64px]">
        {doctors && doctors.length ? (
          <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[24px]">
            {doctors?.map((doctor) => (
              <ItemDoctor
                key={doctor.id}
                doctor={doctor}
                doctors={doctors}
                setDoctors={setDoctors}
              />
            ))}
          </ul>
        ) : (
          <p className="text-center py-10 text-gray-500">
            دکتری برای نمایش وجود ندارد.
          </p>
        )}
      </div>
      <div className="mt-[56px] flex justify-center">
        <Pagination list={doctorList} itemsPerPage={12} />
      </div>
    </>
  );
}

export default ListDoctors;