"use client";
'use strict';

var React = require('react');
var clsx = require('clsx');
var tailwindMerge = require('tailwind-merge');
var jsxRuntime = require('react/jsx-runtime');
var img = require('@page-speed/img');

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespace(React);

// components/blocks/comparison/comparison-table-two-column.tsx
function cn(...inputs) {
  return tailwindMerge.twMerge(clsx.clsx(inputs));
}
var svgCache = /* @__PURE__ */ new Map();
function DynamicIcon({
  name,
  size = 28,
  color,
  className,
  alt
}) {
  const [svgContent, setSvgContent] = React__namespace.useState(null);
  const [isLoading, setIsLoading] = React__namespace.useState(true);
  const [error, setError] = React__namespace.useState(null);
  const { url, iconName } = React__namespace.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__namespace.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__ */ jsxRuntime.jsx(
      "span",
      {
        className: cn("inline-block", className),
        style: { width: size, height: size },
        "aria-hidden": "true"
      }
    );
  }
  if (error || !svgContent) {
    return /* @__PURE__ */ jsxRuntime.jsx(
      "span",
      {
        className: cn("inline-block", className),
        style: { width: size, height: size },
        role: "img",
        "aria-label": alt || iconName
      }
    );
  }
  return /* @__PURE__ */ jsxRuntime.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 defaultRows = [
  {
    label: "Onboarding",
    optionA: "1-2 days",
    optionB: "30 days"
  },
  {
    label: "Price Range",
    optionA: "10%",
    optionB: "50-60%"
  },
  {
    label: "Quality Score",
    optionA: "Top 3%",
    optionB: "Varies"
  },
  {
    label: "Verification",
    optionA: "Multi-step verification process",
    optionB: "Basic check",
    hasIcon: true
  },
  {
    label: "Adaptability",
    optionA: "Fully flexible",
    optionB: "Limited",
    hasIcon: true
  },
  {
    label: "Support",
    optionA: "24/7 dedicated team",
    optionB: "Limited hours",
    hasIcon: true
  }
];
function ComparisonTableTwoColumn({
  heading = "Compare us with others.",
  description,
  rows = defaultRows,
  tableSlot,
  optionALogo,
  optionALogoAlt = "Option A logo",
  optionALabel = "Option A",
  optionBLogo,
  optionBLogoAlt = "Option B logo",
  optionBLabel = "Option B",
  className,
  containerClassName,
  headingClassName,
  descriptionClassName,
  tableWrapperClassName,
  tableGridClassName,
  optionACellClassName,
  optionBCellClassName,
  optixFlowConfig
}) {
  const renderTable = () => {
    if (tableSlot) return tableSlot;
    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("-mr-4 overflow-x-auto", tableWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-2xl overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-3 [&>:last-child_div]:rounded-b-md [&>div:nth-last-child(-n+3)]:rounded-b-md [&>div:nth-last-child(-n+3)]:border-b-0", tableGridClassName), children: [
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4" }),
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center rounded-t-md bg-green-100 p-3 md:p-4", optionACellClassName), children: optionALogo ? /* @__PURE__ */ jsxRuntime.jsx(
        img.Img,
        {
          src: optionALogo,
          alt: optionALogoAlt,
          className: "h-7 md:h-8",
          optixFlowConfig
        }
      ) : typeof optionALabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold text-green-800", children: optionALabel }) : optionALabel }),
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center rounded-t-md bg-red-100 p-3 md:p-4", optionBCellClassName), children: optionBLogo ? /* @__PURE__ */ jsxRuntime.jsx(
        img.Img,
        {
          src: optionBLogo,
          alt: optionBLogoAlt,
          className: "h-7 md:h-8",
          optixFlowConfig
        }
      ) : typeof optionBLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold text-red-800", children: optionBLabel }) : optionBLabel }),
      rows.map((row, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center border-b p-3 text-base font-medium md:p-4 md:text-lg", children: row.label }),
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("border-b bg-green-50 p-3 md:p-6", optionACellClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
          row.hasIcon && /* @__PURE__ */ jsxRuntime.jsx(
            DynamicIcon,
            {
              name: "lucide/circle-check-big",
              size: 20,
              className: "text-green-600"
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base md:text-lg", children: row.optionA })
        ] }) }),
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("border-b bg-red-50 p-3 md:p-6", optionBCellClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
          row.hasIcon && /* @__PURE__ */ jsxRuntime.jsx(
            DynamicIcon,
            {
              name: "lucide/octagon-x",
              size: 20,
              className: "text-red-600"
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base md:text-lg", children: row.optionB })
        ] }) })
      ] }, idx))
    ] }) }) });
  };
  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
    heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-8 text-3xl font-bold md:mb-12 md:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
    description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8 text-muted-foreground md:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
    renderTable()
  ] }) });
}

exports.ComparisonTableTwoColumn = ComparisonTableTwoColumn;
//# sourceMappingURL=comparison-table-two-column.cjs.map
//# sourceMappingURL=comparison-table-two-column.cjs.map