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

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

export default ListDoctors;