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

function Images({ data }) {
  const images_clinic = data?.images_clinic || [];

  // کلینیک بدون عکس، بلوک تصویر ندارد — تصویر پیش‌فرض به‌جای «عکسی ثبت نشده»
  // خوانده می‌شود و کاربر آن را عکس واقعی کلینیک فرض می‌کند.
  if (images_clinic.length === 0) return null;

  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">
        <div
          className={`grid grid-cols-1 grid-rows-1 gap-[12px] md:gap-[18px] lg:gap-[24px] h-[290px] max-h-[290px] ${images_clinic.length === 1 ? "md:grid-cols-1 h-[350px] max-h-[350px]" : "md:grid-cols-2"}`}
        >
          <CustomLoading width={600} height={400}>
            <Image
              className="rounded-[8px] overflow-hidden w-full h-full object-cover"
              src={imageUrl(images_clinic[0]?.url, "/assets/images/clinic-img.png")}
              alt="img clinic"
              height={432}
              width={600}
            />
          </CustomLoading>
          <List data={data} />
        </div>
      </div>
      <Slider data={data} />
    </div>
  );
}

export default Images;