"use client";
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsx, jsxs } from 'react/jsx-runtime';

// lib/utils.ts
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
function AboutStatsSidebar({
  title,
  description,
  stats,
  statsSlot,
  features,
  featuresSlot,
  className,
  containerClassName,
  sidebarClassName,
  titleClassName,
  descriptionClassName,
  statsClassName,
  featuresClassName
}) {
  const renderStats = () => {
    if (statsSlot) return statsSlot;
    if (!stats || stats.length === 0) return null;
    return /* @__PURE__ */ jsx("div", { className: cn("grid gap-6 sm:grid-cols-2", statsClassName), children: stats.map((stat, idx) => /* @__PURE__ */ jsxs("div", { className: "rounded-xl border bg-card p-6", children: [
      stat.icon,
      typeof stat.value === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-4xl font-bold", children: stat.value }) : /* @__PURE__ */ jsx("div", { className: "mt-4", children: stat.value }),
      typeof stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 font-semibold", children: stat.label }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: stat.label }),
      stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: stat.description }) : /* @__PURE__ */ jsx("div", { className: "mt-2", children: stat.description }))
    ] }, idx)) });
  };
  const renderFeatures = () => {
    if (featuresSlot) return featuresSlot;
    if (!features || features.length === 0) return null;
    return /* @__PURE__ */ jsx("div", { className: cn("mt-12 space-y-6", featuresClassName), children: features.map((feature, idx) => /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
      /* @__PURE__ */ jsx("div", { className: cn("flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10", feature.iconBgClass), children: feature.icon }),
      /* @__PURE__ */ jsxs("div", { children: [
        feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: feature.title }) : feature.title),
        feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: feature.description }) : feature.description)
      ] })
    ] }, idx)) });
  };
  return /* @__PURE__ */ jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-3", children: [
    /* @__PURE__ */ jsxs("div", { className: cn("lg:sticky lg:top-24 lg:self-start", sidebarClassName), children: [
      title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
      description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2", children: [
      (statsSlot || stats && stats.length > 0) && renderStats(),
      (featuresSlot || features && features.length > 0) && renderFeatures()
    ] })
  ] }) }) });
}

export { AboutStatsSidebar };
