"use client";
import * as React from 'react';
import { useRef, useState, useEffect } from 'react';
import Autoplay from 'embla-carousel-autoplay';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { Img } from '@page-speed/img';
import useEmblaCarousel from 'embla-carousel-react';
import { jsx, jsxs } from 'react/jsx-runtime';

// components/blocks/hero/hero-tech-carousel.tsx
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// lib/mediaPlaceholders.ts
var logoPlaceholders = {
  logoMark: "https://cdn.ing/assets/i/r/285975/eud79qeya11q5w6ueyhklueardyx/monochrome-rounded-square-app-icon-circular-emblem.png"};
var CarouselContext = React.createContext(null);
function useCarousel() {
  const context = React.useContext(CarouselContext);
  if (!context) {
    throw new Error("useCarousel must be used within a <Carousel />");
  }
  return context;
}
function Carousel({
  orientation = "horizontal",
  opts,
  setApi,
  plugins,
  className,
  children,
  ...props
}) {
  const [carouselRef, api] = useEmblaCarousel(
    {
      ...opts,
      axis: orientation === "horizontal" ? "x" : "y"
    },
    plugins
  );
  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
  const [canScrollNext, setCanScrollNext] = React.useState(false);
  const onSelect = React.useCallback((api2) => {
    if (!api2) return;
    setCanScrollPrev(api2.canScrollPrev());
    setCanScrollNext(api2.canScrollNext());
  }, []);
  const scrollPrev = React.useCallback(() => {
    api?.scrollPrev();
  }, [api]);
  const scrollNext = React.useCallback(() => {
    api?.scrollNext();
  }, [api]);
  const handleKeyDown = React.useCallback(
    (event) => {
      if (event.key === "ArrowLeft") {
        event.preventDefault();
        scrollPrev();
      } else if (event.key === "ArrowRight") {
        event.preventDefault();
        scrollNext();
      }
    },
    [scrollPrev, scrollNext]
  );
  React.useEffect(() => {
    if (!api || !setApi) return;
    setApi(api);
  }, [api, setApi]);
  React.useEffect(() => {
    if (!api) return;
    onSelect(api);
    api.on("reInit", onSelect);
    api.on("select", onSelect);
    return () => {
      api?.off("select", onSelect);
    };
  }, [api, onSelect]);
  return /* @__PURE__ */ jsx(
    CarouselContext.Provider,
    {
      value: {
        carouselRef,
        api,
        opts,
        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
        scrollPrev,
        scrollNext,
        canScrollPrev,
        canScrollNext
      },
      children: /* @__PURE__ */ jsx(
        "div",
        {
          onKeyDownCapture: handleKeyDown,
          className: cn("relative", className),
          role: "region",
          "aria-roledescription": "carousel",
          "data-slot": "carousel",
          ...props,
          children
        }
      )
    }
  );
}
function CarouselContent({ className, ...props }) {
  const { carouselRef, orientation } = useCarousel();
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref: carouselRef,
      className: "overflow-hidden",
      "data-slot": "carousel-content",
      children: /* @__PURE__ */ jsx(
        "div",
        {
          className: cn(
            "flex",
            orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
            className
          ),
          ...props
        }
      )
    }
  );
}
function CarouselItem({ className, ...props }) {
  const { orientation } = useCarousel();
  return /* @__PURE__ */ jsx(
    "div",
    {
      role: "group",
      "aria-roledescription": "slide",
      "data-slot": "carousel-item",
      className: cn(
        "min-w-0 shrink-0 grow-0 basis-full",
        orientation === "horizontal" ? "pl-4" : "pt-4",
        className
      ),
      ...props
    }
  );
}
var defaultTechnologies = [
  {
    name: "Next",
    command: "npx create-next-app my-app"
  },
  {
    name: "Vite",
    command: "npm create vite@latest"
  },
  {
    name: "Remix",
    command: "npx create-remix@latest my-app"
  },
  {
    name: "Gatsby",
    command: "npm init gatsby"
  },
  {
    name: "Astro",
    command: "npm create astro@latest"
  },
  {
    name: "Laravel",
    command: "laravel new my-app"
  },
  {
    name: "React",
    command: "npx create-react-app my-app"
  }
];
function HeroTechCarousel({
  heading = "Install with one Command",
  description = "Our library is compatible with all popular frameworks, download our SDK and get started in minutes.",
  technologies = defaultTechnologies,
  carouselSlot,
  autoplayDelay = 4e3,
  className,
  containerClassName,
  headingClassName,
  descriptionClassName,
  optixFlowConfig
}) {
  const plugin = useRef(Autoplay({ delay: autoplayDelay, stopOnInteraction: false }));
  const [api, setApi] = useState();
  const [current, setCurrent] = useState(0);
  const [fadeIn, setFadeIn] = useState(true);
  useEffect(() => {
    if (!api) return;
    setCurrent(api.selectedScrollSnap());
    const updateCurrent = () => {
      setFadeIn(false);
      setTimeout(() => {
        setCurrent(api.selectedScrollSnap());
        setFadeIn(true);
      }, 200);
    };
    api.on("select", updateCurrent);
    api.on("settle", updateCurrent);
    return () => {
      api.off("select", updateCurrent);
      api.off("settle", updateCurrent);
    };
  }, [api]);
  const selectTechnology = (index) => {
    if (api) {
      api.scrollTo(index);
    }
  };
  const renderCarousel = () => {
    if (carouselSlot) return carouselSlot;
    return /* @__PURE__ */ jsx(
      Carousel,
      {
        setApi,
        plugins: [plugin.current],
        opts: {
          loop: true
        },
        className: "relative mx-auto w-full max-w-3xl before:absolute before:top-0 before:bottom-0 before:left-0 before:z-10 before:w-36 before:bg-linear-to-r before:from-background before:to-transparent after:absolute after:top-0 after:right-0 after:bottom-0 after:z-10 after:w-36 after:bg-linear-to-l after:from-background after:to-transparent",
        onMouseEnter: plugin.current.stop,
        onMouseLeave: plugin.current.reset,
        children: /* @__PURE__ */ jsx(CarouselContent, { children: technologies.map((technology, idx) => /* @__PURE__ */ jsx(
          CarouselItem,
          {
            className: "basis-1/3 select-none sm:basis-1/4 md:basis-1/6",
            children: /* @__PURE__ */ jsxs(
              "div",
              {
                className: cn(
                  "flex cursor-pointer items-center justify-center gap-2 rounded-md border p-6",
                  idx === current ? "border-input" : "border-transparent"
                ),
                onClick: () => selectTechnology(idx),
                children: [
                  /* @__PURE__ */ jsx(
                    Img,
                    {
                      className: "h-4 shrink-0 md:h-7",
                      src: technology.logo || logoPlaceholders.logoMark,
                      alt: technology.name,
                      optixFlowConfig
                    }
                  ),
                  /* @__PURE__ */ jsx("p", { children: technology.name })
                ]
              }
            )
          },
          idx
        )) })
      }
    );
  };
  return /* @__PURE__ */ jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
    /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center", children: [
      heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mx-auto mb-4 max-w-2xl text-center text-4xl font-bold md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("mx-auto mb-4 max-w-2xl text-center text-4xl font-bold md:text-6xl", headingClassName), children: heading })),
      description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto mt-4 max-w-xl text-center text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
      /* @__PURE__ */ jsx("div", { className: "mx-auto mt-8 mb-12 flex h-[60px] w-fit items-center gap-2 rounded-md bg-muted px-4 py-2 text-center", children: /* @__PURE__ */ jsxs(
        "div",
        {
          className: cn(
            "flex items-center gap-2 transition-opacity duration-300",
            fadeIn ? "opacity-100" : "opacity-0"
          ),
          children: [
            /* @__PURE__ */ jsx(
              Img,
              {
                src: technologies[current]?.logo || logoPlaceholders.logoMark,
                alt: technologies[current]?.name,
                className: "h-4 md:h-7",
                optixFlowConfig
              }
            ),
            /* @__PURE__ */ jsx("p", { className: "border-l px-2 font-mono text-sm", children: technologies[current]?.command })
          ]
        }
      ) })
    ] }),
    renderCarousel()
  ] }) });
}

export { HeroTechCarousel };
//# sourceMappingURL=hero-tech-carousel.js.map
//# sourceMappingURL=hero-tech-carousel.js.map