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

function Slider({ data }) {
  return (
    <ul className="flex md:hidden gap-2 w-full justify-start items-center overflow-auto hidden-scroll">
      {data &&
        data.images_clinic &&
        data.images_clinic.length &&
        data.images_clinic.map((item, idx) =>
          idx !== 0 ? (
            <CustomLoading key={idx} width={90} height={90}>
              <Image
                src={imageUrl(item.url)}
                width={90}
                height={90}
                alt="image clinic"
                className="min-w-[90px] min-h-[90px] object-cover rounded-[8px] overflow-hidden"
              />
            </CustomLoading>
          ) : undefined
        )}
    </ul>
  );
}

export default Slider;
