import CustomLoading from "@/app/component/loading/Custom";
import Image from "next/image";

function List({ data }) {
  const images_clinic = data.images_clinic;
  const lengthImgClinics = images_clinic.length;

  return (
    <div
      className={`hidden w-full md:grid gap-[16px] lg:gap-[24px]
        ${
          lengthImgClinics === 1
            ? "md:!hidden"
            : lengthImgClinics === 2
              ? "grid-cols-1 grid-rows-1"
              : lengthImgClinics === 3
                ? "grid-cols-1 grid-rows-2"
                : lengthImgClinics === 4
                  ? "grid-cols-2 grid-rows-2"
                  : ""
        }
      `}
    >
      {images_clinic.map((img, idx) =>
        idx !== 0 ? (
          <div
            key={idx}
            className={`${
              lengthImgClinics === 3
                ? "h-full"
                : lengthImgClinics === 4
                  ? idx === lengthImgClinics - 1
                    ? "w-[calc(200%+16px)] lg:w-[calc(200%+24px)]"
                    : "w-full h-full"
                  : "h-full w-full"
            }`}
          >
            <CustomLoading width="full" height={190}>
              <Image
                className="rounded-[8px] overflow-hidden w-full h-full object-cover"
                src={img.url || ""}
                alt="img clinic"
                height={204}
                width={288}
              />
            </CustomLoading>
          </div>
        ) : undefined
      )}
    </div>
  );
}

export default List;
