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

// 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 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 defaultProductA = {
  name: "Product A",
  highlighted: true,
  features: [
    { text: "Basic Plan Available", included: true },
    { text: "Unlimited Users", included: true },
    { text: "Advanced Features", included: true },
    { text: "Partner Program", included: true },
    { text: "Live Events", included: true },
    { text: "Community Access", included: true },
    { text: "Premium Support", included: true }
  ]
};
var defaultProductB = {
  name: "Product B",
  highlighted: false,
  features: [
    { text: "Basic Plan Available", included: true },
    { text: "Unlimited Users", included: true },
    { text: "Basic Features", included: true },
    { text: "Partner Program", included: false },
    { text: "Live Events", included: false },
    { text: "Community Access", included: false },
    { text: "Premium Support", included: false }
  ]
};
function ComparisonFeatureCards({
  heading = "Product A vs. Product B: Making the Right Choice",
  description = "Product A isn't just an alternative to Product B. It offers enhanced features and capabilities, making it easier to achieve your goals with a modern, intuitive interface designed for today's needs.",
  productA = defaultProductA,
  productB = defaultProductB,
  cardsSlot,
  suitabilityTitle = "Who is Product B suitable for?",
  suitabilityDescription = "Product B is a reliable solution designed for basic needs and smaller teams. It provides essential functionality for those getting started or requiring fundamental features. While it offers a straightforward interface, it may lack some of the advanced capabilities needed for scaling operations or handling complex workflows.",
  differencesTitle = "Key Differences and Considerations",
  differencesDescription = "When choosing between Product A and Product B, consider your long-term needs and growth plans. Product A offers more advanced features, better scalability, and premium support options. While Product B might be suitable for basic use cases, Product A provides a more comprehensive solution for teams looking to expand and optimize their workflows.",
  className,
  containerClassName,
  headingClassName,
  descriptionClassName,
  cardsGridClassName,
  cardClassName,
  suitabilityClassName,
  differencesClassName,
  optixFlowConfig
}) {
  const renderCard = (product, isHighlighted) => /* @__PURE__ */ jsxs(
    "div",
    {
      className: cn(
        "rounded-xl p-6",
        isHighlighted ? "border bg-background shadow" : "bg-border/40",
        cardClassName
      ),
      children: [
        /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-center gap-2 font-medium", children: [
          product.logo ? /* @__PURE__ */ jsx(
            Img,
            {
              src: product.logo,
              alt: product.logoAlt || `${product.name} logo`,
              className: "h-7",
              optixFlowConfig
            }
          ) : null,
          product.name
        ] }),
        /* @__PURE__ */ jsx(Separator, { className: "my-6" }),
        /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: product.features.map((feature, idx) => /* @__PURE__ */ jsxs(
          "li",
          {
            className: cn(
              "flex items-center gap-2",
              !feature.included && "text-muted-foreground line-through"
            ),
            children: [
              feature.included ? /* @__PURE__ */ jsx(
                DynamicIcon,
                {
                  name: "lucide/circle-check-big",
                  size: 20,
                  className: "shrink-0 text-emerald-700"
                }
              ) : /* @__PURE__ */ jsx(
                DynamicIcon,
                {
                  name: "lucide/circle-minus",
                  size: 20,
                  className: "shrink-0 opacity-50"
                }
              ),
              feature.text
            ]
          },
          idx
        )) })
      ]
    }
  );
  const renderCards = () => {
    if (cardsSlot) return cardsSlot;
    return /* @__PURE__ */ jsxs(Fragment, { children: [
      renderCard(productA, productA.highlighted ?? true),
      renderCard(productB, productB.highlighted ?? false)
    ] });
  };
  return /* @__PURE__ */ jsx("section", { className: cn("bg-muted/50 py-32", className), children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
      heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-6 text-4xl font-semibold md:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
      description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-4xl text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
    ] }),
    /* @__PURE__ */ jsx("div", { className: "mt-28", children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto grid max-w-3xl gap-6 md:grid-cols-2", cardsGridClassName), children: renderCards() }) }),
    /* @__PURE__ */ jsxs("div", { className: "mx-auto mt-16 max-w-3xl", children: [
      (suitabilityTitle || suitabilityDescription) && /* @__PURE__ */ jsxs("div", { className: suitabilityClassName, children: [
        suitabilityTitle && (typeof suitabilityTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: "mb-4 text-3xl font-semibold", children: suitabilityTitle }) : suitabilityTitle),
        suitabilityDescription && (typeof suitabilityDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "leading-6 text-muted-foreground md:text-lg", children: suitabilityDescription }) : suitabilityDescription)
      ] }),
      (differencesTitle || differencesDescription) && /* @__PURE__ */ jsxs("div", { className: cn("mt-16", differencesClassName), children: [
        differencesTitle && (typeof differencesTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: "mb-4 text-3xl font-semibold", children: differencesTitle }) : differencesTitle),
        differencesDescription && (typeof differencesDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "leading-6 text-muted-foreground md:text-lg", children: differencesDescription }) : differencesDescription)
      ] })
    ] })
  ] }) });
}

export { ComparisonFeatureCards };
//# sourceMappingURL=comparison-feature-cards.js.map
//# sourceMappingURL=comparison-feature-cards.js.map