"use client";
import { motion } from 'framer-motion';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsx, jsxs } from 'react/jsx-runtime';
import * as SeparatorPrimitive from '@radix-ui/react-separator';
import * as React from 'react';

// components/blocks/timeline/timeline-horizontal-icons.tsx
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
function Card({ className, ...props }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      "data-slot": "card",
      className: cn(
        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
        className
      ),
      ...props
    }
  );
}
function CardContent({ className, ...props }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      "data-slot": "card-content",
      className: cn("px-6", className),
      ...props
    }
  );
}
function Separator({
  className,
  orientation = "horizontal",
  decorative = true,
  ...props
}) {
  return /* @__PURE__ */ jsx(
    SeparatorPrimitive.Root,
    {
      "data-slot": "separator",
      decorative,
      orientation,
      className: cn(
        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
        className
      ),
      ...props
    }
  );
}
var svgCache = /* @__PURE__ */ new Map();
function DynamicIcon({
  name,
  size = 28,
  color,
  className,
  alt
}) {
  const [svgContent, setSvgContent] = React.useState(null);
  const [isLoading, setIsLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const { url, iconName } = React.useMemo(() => {
    const separator = name.includes("/") ? "/" : ":";
    const [prefix, iconName2] = name.split(separator);
    const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
    return {
      url: baseUrl,
      iconName: iconName2
    };
  }, [name, size]);
  React.useEffect(() => {
    let isMounted = true;
    const fetchSvg = async () => {
      const cached = svgCache.get(url);
      if (cached) {
        if (isMounted) {
          setSvgContent(cached);
          setIsLoading(false);
        }
        return;
      }
      try {
        setIsLoading(true);
        setError(null);
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`Failed to fetch icon: ${response.status}`);
        }
        let svg = await response.text();
        svg = processSvgForCurrentColor(svg);
        svgCache.set(url, svg);
        if (isMounted) {
          setSvgContent(svg);
          setIsLoading(false);
        }
      } catch (err) {
        if (isMounted) {
          setError(err instanceof Error ? err.message : "Failed to load icon");
          setIsLoading(false);
        }
      }
    };
    fetchSvg();
    return () => {
      isMounted = false;
    };
  }, [url]);
  if (isLoading) {
    return /* @__PURE__ */ jsx(
      "span",
      {
        className: cn("inline-block", className),
        style: { width: size, height: size },
        "aria-hidden": "true"
      }
    );
  }
  if (error || !svgContent) {
    return /* @__PURE__ */ jsx(
      "span",
      {
        className: cn("inline-block", className),
        style: { width: size, height: size },
        role: "img",
        "aria-label": alt || iconName
      }
    );
  }
  return /* @__PURE__ */ jsx(
    "span",
    {
      className: cn("inline-flex items-center justify-center", className),
      style: {
        width: size,
        height: size,
        color: color || "inherit"
      },
      role: "img",
      "aria-label": alt || iconName,
      dangerouslySetInnerHTML: { __html: svgContent }
    }
  );
}
function processSvgForCurrentColor(svg) {
  let processed = svg;
  processed = processed.replace(
    /stroke=["'](#000000|#000|black)["']/gi,
    'stroke="currentColor"'
  );
  processed = processed.replace(
    /fill=["'](#000000|#000|black)["']/gi,
    'fill="currentColor"'
  );
  return processed;
}
var defaultPhases = [
  {
    id: 0,
    date: "January 15, 2024",
    title: "Phase I",
    description: "Project initialization and strategic planning begins.",
    icon: "lucide/rocket"
  },
  {
    id: 1,
    date: "March 10, 2024",
    title: "Phase II",
    description: "Detailed research and preliminary development stage.",
    icon: "lucide/cpu"
  },
  {
    id: 2,
    date: "June 5, 2024",
    title: "Phase III",
    description: "Core implementation and major milestones achieved.",
    icon: "lucide/locate-fixed"
  },
  {
    id: 3,
    date: "September 20, 2024",
    title: "Phase IV",
    description: "Final refinements and project completion.",
    icon: "lucide/flag"
  }
];
function TimelineHorizontalIcons({
  className,
  heading = "Timeline",
  currentPhase = 2,
  phases = defaultPhases
}) {
  return /* @__PURE__ */ jsx("section", { className: cn("bg-background py-32", className), children: /* @__PURE__ */ jsxs("div", { className: "container flex flex-col items-center justify-center", children: [
    /* @__PURE__ */ jsx("h1", { className: "mb-10 text-center text-3xl font-bold tracking-tighter text-foreground sm:text-6xl", children: heading }),
    /* @__PURE__ */ jsx(Card, { className: "relative w-full border-none shadow-none md:py-16", children: /* @__PURE__ */ jsxs(CardContent, { className: "relative flex flex-col items-center p-0 md:mt-12", children: [
      /* @__PURE__ */ jsx(Separator, { className: "absolute -top-8 left-0 hidden md:block" }),
      currentPhase !== void 0 && /* @__PURE__ */ jsx(
        motion.div,
        {
          initial: { width: 0 },
          whileInView: {
            width: `${currentPhase / phases.length * 104}%`
          },
          transition: { ease: "easeOut", duration: 0.5 },
          className: cn(
            "absolute -top-[33px] left-0 hidden h-0.5 bg-foreground md:block"
          )
        }
      ),
      /* @__PURE__ */ jsx("div", { className: "grid gap-6 md:grid-cols-4", children: phases.map((phase, index) => /* @__PURE__ */ jsxs("div", { className: "relative space-y-2", children: [
        /* @__PURE__ */ jsx(
          Separator,
          {
            orientation: "vertical",
            className: "absolute top-6 left-2.5 block md:hidden"
          }
        ),
        index === 0 && /* @__PURE__ */ jsx(
          motion.div,
          {
            initial: { height: 0 },
            whileInView: {
              height: currentPhase * 125
            },
            transition: { ease: "easeOut", duration: 0.5 },
            className: cn(
              "absolute top-22 left-2.5 z-10 w-0.5 bg-foreground md:hidden"
            )
          }
        ),
        /* @__PURE__ */ jsx("div", { className: "absolute top-4 -left-6 z-10 mb-5 flex size-18 items-center justify-center rounded-full bg-background p-1 md:-top-17 md:-left-4", children: /* @__PURE__ */ jsx("div", { className: "flex size-10 items-center justify-center rounded-lg border border-border bg-background p-[5px]", children: /* @__PURE__ */ jsx("div", { className: "flex size-full items-center justify-center rounded-md border border-border bg-muted", children: /* @__PURE__ */ jsx(DynamicIcon, { name: phase.icon, size: 16 }) }) }) }),
        /* @__PURE__ */ jsxs("div", { className: "pl-13 md:pl-0", children: [
          /* @__PURE__ */ jsx("p", { className: "mt-10 text-sm text-muted-foreground", children: phase.date }),
          /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold tracking-tighter text-foreground", children: phase.title }),
          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: phase.description })
        ] })
      ] }, phase.id)) })
    ] }) })
  ] }) });
}

export { TimelineHorizontalIcons };
//# sourceMappingURL=timeline-horizontal-icons.js.map
//# sourceMappingURL=timeline-horizontal-icons.js.map