"use client";
'use strict';

var react = require('react');
var framerMotion = require('framer-motion');
var clsx = require('clsx');
var tailwindMerge = require('tailwind-merge');
var jsxRuntime = require('react/jsx-runtime');

// components/blocks/project-list/project-sticky-scroll.tsx
function cn(...inputs) {
  return tailwindMerge.twMerge(clsx.clsx(inputs));
}
var backgroundColors = [
  "rgb(15 23 42)",
  // slate-900
  "rgb(0 0 0)",
  // black
  "rgb(23 23 23)"
  // neutral-900
];
var linearGradients = [
  "linear-gradient(to bottom right, rgb(6 182 212), rgb(16 185 129))",
  // cyan-500 to emerald-500
  "linear-gradient(to bottom right, rgb(236 72 153), rgb(99 102 241))",
  // pink-500 to indigo-500
  "linear-gradient(to bottom right, rgb(249 115 22), rgb(234 179 8))"
  // orange-500 to yellow-500
];
function ProjectStickyScroll({
  className,
  content,
  contentClassName
}) {
  const [activeCard, setActiveCard] = react.useState(0);
  const ref = react.useRef(null);
  const { scrollYProgress } = framerMotion.useScroll({
    container: ref,
    offset: ["start start", "end start"]
  });
  const cardLength = content.length;
  framerMotion.useMotionValueEvent(scrollYProgress, "change", (latest) => {
    const cardsBreakpoints = content.map((_, index) => index / cardLength);
    const closestBreakpointIndex = cardsBreakpoints.reduce(
      (acc, breakpoint, index) => {
        const distance = Math.abs(latest - breakpoint);
        if (distance < Math.abs(latest - cardsBreakpoints[acc])) {
          return index;
        }
        return acc;
      },
      0
    );
    setActiveCard(closestBreakpointIndex);
  });
  const [backgroundGradient, setBackgroundGradient] = react.useState(
    linearGradients[0]
  );
  react.useEffect(() => {
    setBackgroundGradient(linearGradients[activeCard % linearGradients.length]);
  }, [activeCard]);
  return /* @__PURE__ */ jsxRuntime.jsxs(
    framerMotion.motion.div,
    {
      animate: {
        backgroundColor: backgroundColors[activeCard % backgroundColors.length]
      },
      className: cn(
        "h-120 overflow-y-auto flex justify-center relative space-x-10 rounded-md p-10",
        className
      ),
      ref,
      children: [
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "div relative flex items-start px-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-2xl", children: [
          content.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-20", children: [
            /* @__PURE__ */ jsxRuntime.jsx(
              framerMotion.motion.h2,
              {
                initial: {
                  opacity: 0
                },
                animate: {
                  opacity: activeCard === index ? 1 : 0.3
                },
                className: "text-2xl font-bold text-slate-100",
                children: item.title
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsx(
              framerMotion.motion.p,
              {
                initial: {
                  opacity: 0
                },
                animate: {
                  opacity: activeCard === index ? 1 : 0.3
                },
                className: "text-kg text-slate-300 max-w-sm mt-10",
                children: item.description
              }
            )
          ] }, item.title + index)),
          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-40" })
        ] }) }),
        /* @__PURE__ */ jsxRuntime.jsx(
          "div",
          {
            style: { background: backgroundGradient },
            className: cn(
              "hidden lg:block h-60 w-80 rounded-md bg-white sticky top-10 overflow-hidden",
              contentClassName
            ),
            children: content[activeCard].content ?? null
          }
        )
      ]
    }
  );
}

exports.ProjectStickyScroll = ProjectStickyScroll;
//# sourceMappingURL=project-sticky-scroll.cjs.map
//# sourceMappingURL=project-sticky-scroll.cjs.map