import Pageguide from "@/app/component/Pageguide";
import clinics from "@/data/clinics.json";
import ItemClinic from "./ItemClinic";
import Pagination from "@/app/component/Pagination";
import { useProvince } from "@/context/ProvinceProvider";

function List({ loading }) {
  const { isProvinceInclude } = useProvince();
  const listPage = ["کلینیک ها", isProvinceInclude?.name || ""];

  return (
    <div className="padding-responsive pt-[20px]">
      <Pageguide list={listPage} />
      <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} loading={loading} />
        ))}
      </ul>
      <div className="mt-[48px] flex justify-center">
        <Pagination />
      </div>
    </div>
  );
}

export default List;