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

function Images({ data }) {
  return (
    <div
      className="
            flex flex-col md:flex-row items-center mb-[8px] justify-center w-full
            gap-[12px] md:gap-[18px] lg:gap-[24px] overflow-hidden
        "
    >
      <div className="w-full">
        <CustomLoading width={600} height={400}>
          <Image
            className="rounded-[8px] overflow-hidden"
            src={
              (data?.images_clinic &&
                !!data?.images_clinic.length &&
                data?.images_clinic[0]) ||
              ""
            }
            alt="img clinic"
            height={432}
            width={600}
          />
        </CustomLoading>
      </div>
      <List data={data} />
      <Slider data={data} />
    </div>
  );
}

export default Images;
