"use client";
import * as React from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { AnimatePresence, motion } from 'motion/react';
import { Img } from '@page-speed/img';
import { jsx, jsxs } from 'react/jsx-runtime';

function cn(...inputs) {
  return twMerge(clsx(inputs));
}
var slideVariants = {
  initial: {
    scale: 0.98,
    opacity: 0,
    rotateX: 12
  },
  visible: {
    scale: 1,
    rotateX: 0,
    opacity: 1,
    transition: {
      duration: 0.55,
      ease: [0.645, 0.045, 0.355, 1]
    }
  },
  upExit: {
    opacity: 0.8,
    y: "-120%",
    transition: {
      duration: 0.8
    }
  },
  downExit: {
    opacity: 0.8,
    y: "120%",
    transition: {
      duration: 0.8
    }
  }
};
var normalizeIndex = (index, length) => {
  if (!length) return 0;
  const safeIndex = index % length;
  return safeIndex < 0 ? safeIndex + length : safeIndex;
};
var ImageSlider = ({
  images,
  children,
  overlay = true,
  overlaySlot,
  overlayClassName,
  className,
  imageClassName,
  contentClassName,
  autoplay = true,
  autoplayIntervalMs = 6e3,
  direction = "up",
  startIndex = 0,
  enableKeyboard = true,
  onSlideChange,
  optixFlowConfig
}) => {
  const hasImages = images.length > 0;
  const [currentIndex, setCurrentIndex] = React.useState(
    () => normalizeIndex(startIndex, images.length)
  );
  const handleNext = React.useCallback(() => {
    if (!hasImages) return;
    setCurrentIndex((prevIndex) => {
      const nextIndex = prevIndex + 1 >= images.length ? 0 : prevIndex + 1;
      onSlideChange?.(nextIndex);
      return nextIndex;
    });
  }, [hasImages, images.length, onSlideChange]);
  const handlePrevious = React.useCallback(() => {
    if (!hasImages) return;
    setCurrentIndex((prevIndex) => {
      const nextIndex = prevIndex - 1 < 0 ? images.length - 1 : prevIndex - 1;
      onSlideChange?.(nextIndex);
      return nextIndex;
    });
  }, [hasImages, images.length, onSlideChange]);
  React.useEffect(() => {
    if (!hasImages) return;
    setCurrentIndex(normalizeIndex(startIndex, images.length));
  }, [startIndex, images.length, hasImages]);
  React.useEffect(() => {
    if (!enableKeyboard || !hasImages) return;
    const handleKeyDown = (event) => {
      if (event.key === "ArrowRight") {
        handleNext();
      } else if (event.key === "ArrowLeft") {
        handlePrevious();
      }
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, [enableKeyboard, handleNext, handlePrevious, hasImages]);
  React.useEffect(() => {
    if (!autoplay || images.length < 2) return;
    const interval = window.setInterval(handleNext, autoplayIntervalMs);
    return () => window.clearInterval(interval);
  }, [autoplay, autoplayIntervalMs, handleNext, images.length]);
  const activeImage = hasImages ? images[currentIndex] : null;
  const overlayContent = overlaySlot ? /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 z-10", overlayClassName), children: overlaySlot }) : overlay ? /* @__PURE__ */ jsx(
    "div",
    {
      className: cn(
        "absolute inset-0 z-10 bg-linear-to-b from-black/35 via-black/50 to-black/70",
        overlayClassName
      )
    }
  ) : null;
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: cn(
        "relative flex min-h-[420px] w-full items-center justify-center overflow-hidden rounded-3xl border border-border/40 bg-muted/30 shadow-2xl",
        className
      ),
      style: {
        perspective: "1000px"
      },
      children: [
        /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: activeImage ? /* @__PURE__ */ jsx(
          motion.div,
          {
            initial: "initial",
            animate: "visible",
            exit: direction === "up" ? "upExit" : "downExit",
            variants: slideVariants,
            className: "absolute inset-0",
            children: /* @__PURE__ */ jsx(
              Img,
              {
                src: activeImage.src,
                mediaId: activeImage.mediaId,
                alt: activeImage.alt,
                className: cn(
                  "h-full w-full object-cover object-center",
                  imageClassName,
                  activeImage.className
                ),
                optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
                eager: true
              }
            )
          },
          `${currentIndex}-${activeImage.src ?? activeImage.mediaId ?? "image"}`
        ) : null }),
        overlayContent,
        children ? /* @__PURE__ */ jsx(
          "div",
          {
            className: cn(
              "relative z-20 flex w-full flex-col items-center justify-center px-6 py-12 text-center text-white md:px-12",
              contentClassName
            ),
            children
          }
        ) : null
      ]
    }
  );
};

export { ImageSlider };
