import CustomLoading from "@/app/component/loading/Custom";
import Image from "next/image";
import { imageUrl } from "@/helper";

function List({ data }) {
  const images_clinic = data?.images_clinic || [];
  const lengthImgClinics = images_clinic.length;

  // عکس اول به‌صورت بزرگ در Images.js نمایش داده می‌شود؛ اینجا بقیه‌ی عکس‌ها را نشان می‌دهیم.
  const rest = images_clinic.slice(1);

  return (
    <div
      className={`hidden w-full md:grid gap-[16px] lg:gap-[24px] ${rest.length === 0 ? "md:!hidden" : rest.length === 1 ? "grid-cols-1 grid-rows-1" : "grid-cols-2 auto-rows-fr" } `}
    >
      {rest.map((img, idx) => (
        <div key={idx} className="h-full w-full">
          <CustomLoading width="full" height={190}>
            <Image
              className="rounded-[8px] overflow-hidden w-full h-full object-cover"
              src={imageUrl(img.url, "/assets/images/clinic-img.png")}
              alt="img clinic"
              height={204}
              width={288}
            />
          </CustomLoading>
        </div>
      ))}
    </div>
  );
}

export default List;
