"use client";
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsx, jsxs } from 'react/jsx-runtime';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';

// lib/utils.ts
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
function Table({ className, ...props }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      "data-slot": "table-container",
      className: "relative w-full overflow-x-auto",
      children: /* @__PURE__ */ jsx(
        "table",
        {
          "data-slot": "table",
          className: cn("w-full caption-bottom text-sm", className),
          ...props
        }
      )
    }
  );
}
function TableHeader({ className, ...props }) {
  return /* @__PURE__ */ jsx(
    "thead",
    {
      "data-slot": "table-header",
      className: cn("[&_tr]:border-b", className),
      ...props
    }
  );
}
function TableBody({ className, ...props }) {
  return /* @__PURE__ */ jsx(
    "tbody",
    {
      "data-slot": "table-body",
      className: cn("[&_tr:last-child]:border-0", className),
      ...props
    }
  );
}
function TableRow({ className, ...props }) {
  return /* @__PURE__ */ jsx(
    "tr",
    {
      "data-slot": "table-row",
      className: cn(
        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
        className
      ),
      ...props
    }
  );
}
function TableHead({ className, ...props }) {
  return /* @__PURE__ */ jsx(
    "th",
    {
      "data-slot": "table-head",
      className: cn(
        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
        className
      ),
      ...props
    }
  );
}
function TableCell({ className, ...props }) {
  return /* @__PURE__ */ jsx(
    "td",
    {
      "data-slot": "table-cell",
      className: cn(
        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
        className
      ),
      ...props
    }
  );
}
function TooltipProvider({
  delayDuration = 0,
  ...props
}) {
  return /* @__PURE__ */ jsx(
    TooltipPrimitive.Provider,
    {
      "data-slot": "tooltip-provider",
      delayDuration,
      ...props
    }
  );
}
function Tooltip({
  ...props
}) {
  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
}
function TooltipTrigger({
  ...props
}) {
  return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
}
function TooltipContent({
  className,
  sideOffset = 0,
  children,
  ...props
}) {
  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
    TooltipPrimitive.Content,
    {
      "data-slot": "tooltip-content",
      sideOffset,
      className: cn(
        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
        className
      ),
      ...props,
      children: [
        children,
        /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
      ]
    }
  ) });
}
function ComparisonTableTooltips({
  heading,
  description,
  optionALabel = "Our Solution",
  optionBLabel = "Alternative",
  rows,
  tableSlot,
  className,
  containerClassName,
  headingClassName,
  descriptionClassName,
  tableWrapperClassName,
  tableClassName,
  tableHeaderClassName,
  tableCellClassName
}) {
  const renderCellContent = (cell, isHighlighted) => {
    if (typeof cell === "string") {
      return cell;
    }
    if (cell.tooltip) {
      return /* @__PURE__ */ jsxs(Tooltip, { children: [
        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
          "span",
          {
            className: cn(
              "cursor-pointer underline decoration-dotted",
              !isHighlighted && "text-muted-foreground"
            ),
            children: cell.value
          }
        ) }),
        /* @__PURE__ */ jsxs(TooltipContent, { sideOffset: 8, className: "max-w-xs", children: [
          /* @__PURE__ */ jsx("span", { className: "mb-1 block font-semibold", children: cell.tooltip.title }),
          cell.tooltip.content
        ] })
      ] });
    }
    return cell.value;
  };
  const renderTable = () => {
    if (tableSlot) return tableSlot;
    if (!rows || rows.length === 0) return null;
    return /* @__PURE__ */ jsxs(Table, { className: cn("rounded border text-left shadow-lg", tableClassName), children: [
      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
        /* @__PURE__ */ jsx(TableHead, { className: tableHeaderClassName }),
        /* @__PURE__ */ jsx(TableHead, { className: cn("bg-muted px-6 py-4 font-semibold", tableHeaderClassName), children: optionALabel }),
        /* @__PURE__ */ jsx(TableHead, { className: cn("px-6 py-4 font-semibold", tableHeaderClassName), children: optionBLabel })
      ] }) }),
      /* @__PURE__ */ jsx(TableBody, { className: "text-foreground", children: rows.map((row, idx) => /* @__PURE__ */ jsxs(TableRow, { children: [
        /* @__PURE__ */ jsx(TableCell, { className: cn("px-6 py-4", tableCellClassName), children: row.feature }),
        /* @__PURE__ */ jsx(TableCell, { className: cn("bg-muted px-6 py-4", tableCellClassName), children: renderCellContent(row.optionA, true) }),
        /* @__PURE__ */ jsx(TableCell, { className: cn("px-6 py-4", tableCellClassName), children: renderCellContent(row.optionB, false) })
      ] }, idx)) })
    ] });
  };
  return /* @__PURE__ */ jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
    heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-center text-4xl font-semibold", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
    description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-8 text-center text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
    /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-3xl overflow-x-auto", tableWrapperClassName), children: renderTable() })
  ] }) });
}

export { ComparisonTableTooltips };
