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

function List({ data, loading }) {
  return (
    <div className="hidden w-full md:grid grid-cols-2 gap-[16px] lg:gap-[24px]">
      <div className="w-full">
        <CustomLoading loading={loading} width="full" height={190}>
          <Image
            className="rounded-[8px] overflow-hidden"
            src={data.images_clinic[1]}
            alt="img clinic"
            height={204}
            width={288}
          />
        </CustomLoading>
      </div>
      <div className="w-full">
        <CustomLoading loading={loading} width="full" height={190}>
          <Image
            className="rounded-[8px] overflow-hidden"
            src={data.images_clinic[2]}
            alt="img clinic"
            height={204}
            width={288}
          />
        </CustomLoading>
      </div>
      <div className="w-full">
        <CustomLoading loading={loading} width="full" height={190}>
          <Image
            className="rounded-[8px] overflow-hidden"
            src={data.images_clinic[3]}
            alt="img clinic"
            height={204}
            width={288}
          />
        </CustomLoading>
      </div>
      <div className="w-full">
        <CustomLoading loading={loading} width="full" height={190}>
          <Image
            className="rounded-[8px] overflow-hidden"
            src={data.images_clinic[4]}
            alt="img clinic"
            height={204}
            width={288}
          />
        </CustomLoading>
      </div>
    </div>
  );
}

export default List;
