"use client";

import Image from "next/image";
import { Button as BaseButton } from "@base-ui/react/button";
import { cn } from "@/lib/utils";
import { CaretLeft, CaretRight } from "@phosphor-icons/react";
import { AnimatePresence, m, useMotionValue } from "motion/react";
import { useState } from "react";

const images = ["/succession.jpeg", "/mirror.jpeg", "/dune.jpg"];

const ImageCarousel: React.FC<{
  className?: string;
}> = ({ className }) => {
  const [imgIndex, setImgIndex] = useState(0);

  const dragX = useMotionValue(0);

  const onDragEnd = () => {
    const x = dragX.get();
    const threshold = 40;
    if (x <= -threshold && imgIndex < images.length - 1) setImgIndex((e) => e + 1);
    else if (x >= threshold && imgIndex > 0) setImgIndex((e) => e - 1);
    dragX.set(0);
  };

  return (
    <div
      className={cn(
        "group/hover relative aspect-square size-96 overflow-hidden rounded-lg",
        className
      )}
    >
      <div className="pointer-events-none absolute top-1/2 z-10 flex w-full -translate-y-1/2 justify-between px-5 ">
        <BaseButton
          style={imgIndex === 0 ? { opacity: 0 } : {}}
          className="pointer-events-auto h-fit w-fit rounded-full bg-background/80 p-2 opacity-0 transition-opacity group-hover/hover:opacity-100"
          onClick={() => {
            if (imgIndex > 0) {
              setImgIndex((pv) => pv - 1);
            }
          }}
        >
          <CaretLeft className="stroke-neutral-600" size={20} />
        </BaseButton>
        <BaseButton
          style={imgIndex === images.length - 1 ? { opacity: 0 } : {}}
          className="pointer-events-auto h-fit w-fit rounded-full bg-background/80 p-2  opacity-0 transition-opacity group-hover/hover:opacity-100"
          onClick={() => {
            if (imgIndex < images.length - 1) {
              setImgIndex((pv) => pv + 1);
              images;
            }
          }}
        >
          <CaretRight className="stroke-neutral-600" size={20} />
        </BaseButton>
      </div>
      <div className="pointer-events-none absolute bottom-2 z-10 flex w-full items-center justify-center">
        <div className="flex w-9 items-center justify-center rounded-md bg-primary/80 p-0.5 text-xs text-white opacity-0 transition-opacity group-hover/hover:opacity-100">
          <div>
            {imgIndex + 1}/{images.length}
          </div>
        </div>
      </div>
      <m.div
        drag="x"
        dragConstraints={{
          left: 0,
          right: 0,
        }}
        dragMomentum={false}
        style={{
          x: dragX,
        }}
        animate={{
          translateX: `-${imgIndex * 100}%`,
        }}
        onDragEnd={onDragEnd}
        transition={{
          damping: 18,
          stiffness: 90,
          type: "spring",
        }}
        className=" flex h-full cursor-grab items-center rounded-[inherit] active:cursor-grabbing"
      >
        {images.map((src, i) => {
          return (
            <AnimatePresence key={src}>
              <m.div
                key={src}
                initial={{
                  scale: 0.95,
                }}
                animate={{ scale: 1 }}
                className="size-96 shrink-0 overflow-hidden bg-neutral-800 object-cover first:rounded-l-[inherit] last:rounded-r-[inherit]"
              >
                <Image
                  src={src}
                  alt={`Slide ${i + 1}`}
                  width={384}
                  height={384}
                  className="pointer-events-none h-full w-full object-cover"
                />
              </m.div>
            </AnimatePresence>
          );
        })}
      </m.div>
    </div>
  );
};

export default ImageCarousel;
Draggable Carousel
