"use client";
import * as React from "react";
import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
import { motion } from "motion/react";
import { ArrowLeftIcon, ArrowRightIcon } from "@phosphor-icons/react";
import { Button } from "@/components/ui/button";
import { springs } from "@/lib/motion";
import { cn } from "@/lib/utils";

type CarouselApi = UseEmblaCarouselType[1];
type Options = Parameters<typeof useEmblaCarousel>[0];
type Plugins = Parameters<typeof useEmblaCarousel>[1];

type CarouselProps = {
  opts?: Options;
  plugins?: Plugins;
  orientation?: "horizontal" | "vertical";
  setApi?: (api: CarouselApi) => void;
};
type Ctx = {
  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
  api: CarouselApi;
  scrollPrev: () => void;
  scrollNext: () => void;
  canScrollPrev: boolean;
  canScrollNext: boolean;
  selected: number;
  snaps: number[];
} & CarouselProps;

const CarouselContext = React.createContext<Ctx | null>(null);
export function useCarousel() {
  const c = React.useContext(CarouselContext);
  if (!c) throw new Error("useCarousel must be used within a <Carousel />");
  return c;
}

export function Carousel({
  orientation = "horizontal",
  opts,
  setApi,
  plugins,
  className,
  children,
  ...p
}: React.HTMLAttributes<HTMLDivElement> & CarouselProps) {
  const [carouselRef, api] = useEmblaCarousel({ ...opts, axis: orientation === "horizontal" ? "x" : "y" }, plugins);
  const [state, setState] = React.useState({ prev: false, next: false, selected: 0, snaps: [] as number[] });

  React.useEffect(() => {
    if (!api) return;
    setApi?.(api);
    const sync = (a: NonNullable<CarouselApi>) =>
      setState({ prev: a.canScrollPrev(), next: a.canScrollNext(), selected: a.selectedScrollSnap(), snaps: a.scrollSnapList() });
    sync(api);
    api.on("reInit", sync).on("select", sync);
    return () => {
      api.off("reInit", sync).off("select", sync);
    };
  }, [api, setApi]);

  const scrollPrev = React.useCallback(() => api?.scrollPrev(), [api]);
  const scrollNext = React.useCallback(() => api?.scrollNext(), [api]);

  return (
    <CarouselContext.Provider
      value={{
        carouselRef,
        api,
        opts,
        orientation,
        scrollPrev,
        scrollNext,
        canScrollPrev: state.prev,
        canScrollNext: state.next,
        selected: state.selected,
        snaps: state.snaps,
      }}
    >
      <div
        onKeyDownCapture={(e) => {
          if (e.key === "ArrowLeft") {
            e.preventDefault();
            scrollPrev();
          } else if (e.key === "ArrowRight") {
            e.preventDefault();
            scrollNext();
          }
        }}
        className={cn("relative", className)}
        role="region"
        aria-roledescription="carousel"
        {...p}
      >
        {children}
      </div>
    </CarouselContext.Provider>
  );
}

export function CarouselContent({ className, ...p }: React.HTMLAttributes<HTMLDivElement>) {
  const { carouselRef, orientation } = useCarousel();
  return (
    // padding gives the clay shadows room inside the clipped viewport
    <div ref={carouselRef} className="-m-4 overflow-hidden p-4">
      <div className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)} {...p} />
    </div>
  );
}

export function CarouselItem({ className, ...p }: React.HTMLAttributes<HTMLDivElement>) {
  const { orientation } = useCarousel();
  return (
    <div
      role="group"
      aria-roledescription="slide"
      className={cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className)}
      {...p}
    />
  );
}

export function CarouselPrevious({ className, ...p }: React.ComponentProps<typeof Button>) {
  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
  return (
    <Button
      variant="solid"
      color="neutral"
      size="icon"
      className={cn(
        "absolute size-10",
        orientation === "horizontal" ? "top-1/2 left-2 -translate-y-1/2 sm:-left-14" : "-top-14 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollPrev}
      onClick={scrollPrev}
      {...p}
    >
      <ArrowLeftIcon weight="bold" />
      <span className="sr-only">Previous slide</span>
    </Button>
  );
}

export function CarouselNext({ className, ...p }: React.ComponentProps<typeof Button>) {
  const { orientation, scrollNext, canScrollNext } = useCarousel();
  return (
    <Button
      variant="solid"
      color="neutral"
      size="icon"
      className={cn(
        "absolute size-10",
        orientation === "horizontal" ? "top-1/2 right-2 -translate-y-1/2 sm:-right-14" : "-bottom-14 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollNext}
      onClick={scrollNext}
      {...p}
    >
      <ArrowRightIcon weight="bold" />
      <span className="sr-only">Next slide</span>
    </Button>
  );
}

/** Dot indicators with a sliding active pill. */
export function CarouselDots({ className }: { className?: string }) {
  const { api, snaps, selected } = useCarousel();
  const id = React.useId();
  return (
    <div className={cn("mt-5 flex items-center justify-center gap-2", className)}>
      {snaps.map((_, i) => (
        <button
          key={i}
          type="button"
          aria-label={`Go to slide ${i + 1}`}
          aria-current={i === selected}
          onClick={() => api?.scrollTo(i)}
          className={cn(
            "relative h-2.5 cursor-pointer rounded-full bg-surface-sunken shadow-well transition-[width] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/40",
            i === selected ? "w-7" : "w-2.5"
          )}
        >
          {i === selected && (
            <motion.span
              layoutId={`${id}-dot`}
              transition={springs.snappy}
              className="absolute inset-0 rounded-full bg-primary shadow-[inset_-1px_-2px_0_var(--clay-lo),inset_1px_1px_0_var(--clay-hi)]"
            />
          )}
        </button>
      ))}
    </div>
  );
}
export type { CarouselApi };
Installation
