import Pageguide from "@/app/component/Pageguide";
import ItemClinic from "./ItemClinic";
import Pagination from "@/app/component/Pagination";

function List({ selected, clinics }) {
  const listPage = ["کلینیک ها", selected?.city || ""];

  return (
    <div className="padding-responsive pt-[20px]">
      <Pageguide list={listPage} />
      {clinics && clinics.length ? (
        <ul
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-[24px] 
            gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px] mt-6"
        >
          {clinics.map((item) => (
            <ItemClinic data={item} key={item.id} />
          ))}
        </ul>
      ) : (
        <div className="text-center py-10 text-gray-500">
          کلینیکی با این عنوان یافت نشد!
        </div>
      )}
      <div className="mt-[48px] flex justify-center">
        <Pagination list={clinics} itemsPerPage={12} />
      </div>
    </div>
  );
}

export default List;