import { useState } from "react";
import { useSwipeable } from "react-swipeable";
import Button from "./ui/Button";
import ArrowLeftIcon from "./icons/ArrowLeftIcon";
import ArrowRightIcon from "./icons/ArrowRightIcon";

function AmentitiesContentSlider({ srcs }: { srcs: string[] }) {
  const [current, setCurrent] = useState(0);

  const handlers = useSwipeable({
    onSwipedLeft: handleNext,
    onSwipedRight: handlePrev,
    preventScrollOnSwipe: true,
    touchEventOptions: {
      passive: false,
    },
    trackMouse: true,
  });

  function handlePrev() {
    setCurrent((prev) => Math.max(0, prev - 1));
  }

  function handleNext() {
    setCurrent((prev) => Math.min(srcs.length - 1, prev + 1));
  }

  return (
    <div
      className="relative -mx-[1.667vw] px-[1.667vw] overflow-hidden"
      {...handlers}
    >
      <div
        className="flex flex-nowrap gap-[1.111vw] transition-transform duration-300"
        style={{
          transform: `translateX(calc(${-current} * 100% + ${-current} * 1.111vw))`,
        }}
      >
        {srcs.map((src) => (
          <img
            src={src}
            className="rounded-[1.111vw] shrink-0 select-none pointer-events-none"
            alt=""
          />
        ))}
      </div>
      <Button
        onlyIcon
        variant="secondary"
        disabled={current === 0}
        className="absolute left-[2.778vw] top-1/2 -translate-y-1/2"
        onClick={handlePrev}
      >
        <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
          <ArrowLeftIcon />
        </span>
      </Button>
      <Button
        onlyIcon
        variant="secondary"
        disabled={current === srcs.length - 1}
        className="absolute right-[2.778vw] top-1/2 -translate-y-1/2"
        onClick={handleNext}
      >
        <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
          <ArrowRightIcon />
        </span>
      </Button>
    </div>
  );
}

export default AmentitiesContentSlider;