"use client";
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import * as React from 'react';
import { jsx, jsxs } from 'react/jsx-runtime';
import { Img } from '@page-speed/img';

// lib/utils.ts
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
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;
}
function FeatureNumberedCards({
  features,
  featuresSlot,
  className,
  containerClassName,
  cardsWrapperClassName,
  cardClassName,
  titleClassName,
  descriptionClassName,
  checklistClassName,
  badgeClassName,
  optixFlowConfig
}) {
  const renderChecklistItems = (feature) => {
    if (feature.checklistSlot) return feature.checklistSlot;
    if (!feature.checklistItems || feature.checklistItems.length === 0) return null;
    return feature.checklistItems.map((item, itemIndex) => {
      const isString = typeof item === "string";
      const content = isString ? item : item.content;
      const iconElement = isString ? /* @__PURE__ */ jsx(
        DynamicIcon,
        {
          name: "lucide/check-circle",
          size: 16,
          className: "mt-0.5 shrink-0 sm:mt-1"
        }
      ) : item.icon ?? (item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 16, className: "mt-0.5 shrink-0 sm:mt-1" }) : /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check-circle", size: 16, className: "mt-0.5 shrink-0 sm:mt-1" }));
      const itemClassName = isString ? void 0 : item.className;
      return /* @__PURE__ */ jsxs("li", { className: cn("flex gap-x-3", itemClassName), children: [
        iconElement,
        /* @__PURE__ */ jsx("p", { className: "text-sm md:text-base", children: content })
      ] }, itemIndex);
    });
  };
  const renderFeatures = () => {
    if (featuresSlot) return featuresSlot;
    if (!features || features.length === 0) return null;
    return features.map((feature, index) => {
      const imageAlt = feature.imageAlt || (typeof feature.title === "string" ? feature.title : "Feature image");
      const renderImage = () => {
        if (feature.imageSlot) return feature.imageSlot;
        if (feature.image) {
          return /* @__PURE__ */ jsx(
            Img,
            {
              src: feature.image,
              alt: imageAlt,
              className: "h-full w-full object-cover",
              loading: "lazy",
              optixFlowConfig
            }
          );
        }
        return null;
      };
      return /* @__PURE__ */ jsxs("div", { className: cn("grid rounded-lg border md:grid-cols-2", cardClassName, feature.className), children: [
        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col px-6 py-8 lg:px-8 lg:py-12 xl:px-12 xl:py-20", feature.contentClassName), children: [
          feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-3 text-2xl font-medium sm:mb-5 md:text-3xl lg:text-4xl", titleClassName), children: feature.title }) : /* @__PURE__ */ jsx("div", { className: cn("mb-3 text-2xl font-medium sm:mb-5 md:text-3xl lg:text-4xl", titleClassName), children: feature.title })),
          feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("div", { className: cn("mb-8 text-sm text-muted-foreground sm:mb-10 md:text-base", descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsx("div", { className: cn("mb-8 text-sm text-muted-foreground sm:mb-10 md:text-base", descriptionClassName), children: feature.description })),
          feature.checklistItems && feature.checklistItems.length > 0 || feature.checklistSlot ? /* @__PURE__ */ jsx("ul", { className: cn("mt-auto space-y-2 sm:space-y-3", checklistClassName), children: renderChecklistItems(feature) }) : null
        ] }),
        /* @__PURE__ */ jsxs("div", { className: cn("relative order-first max-h-80 md:order-last md:max-h-[500px]", feature.imageWrapperClassName), children: [
          renderImage(),
          /* @__PURE__ */ jsx("span", { className: cn("absolute top-5 left-5 flex size-6 items-center justify-center rounded-sm bg-primary font-mono text-xs text-primary-foreground md:top-10 md:left-10", badgeClassName), children: String(index + 1).padStart(2, "0") })
        ] })
      ] }, index);
    });
  };
  return /* @__PURE__ */ jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsx("div", { className: cn("space-y-10 rounded-lg border py-10 md:px-4", cardsWrapperClassName), children: renderFeatures() }) }) });
}

export { FeatureNumberedCards };
