"use client";
'use strict';

var clsx = require('clsx');
var tailwindMerge = require('tailwind-merge');
var jsxRuntime = require('react/jsx-runtime');
var TooltipPrimitive = require('@radix-ui/react-tooltip');

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 TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);

// lib/utils.ts
function cn(...inputs) {
  return tailwindMerge.twMerge(clsx.clsx(inputs));
}
function Table({ className, ...props }) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      "data-slot": "table-container",
      className: "relative w-full overflow-x-auto",
      children: /* @__PURE__ */ jsxRuntime.jsx(
        "table",
        {
          "data-slot": "table",
          className: cn("w-full caption-bottom text-sm", className),
          ...props
        }
      )
    }
  );
}
function TableHeader({ className, ...props }) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "thead",
    {
      "data-slot": "table-header",
      className: cn("[&_tr]:border-b", className),
      ...props
    }
  );
}
function TableBody({ className, ...props }) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "tbody",
    {
      "data-slot": "table-body",
      className: cn("[&_tr:last-child]:border-0", className),
      ...props
    }
  );
}
function TableRow({ className, ...props }) {
  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
    TooltipPrimitive__namespace.Provider,
    {
      "data-slot": "tooltip-provider",
      delayDuration,
      ...props
    }
  );
}
function Tooltip({
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Root, { "data-slot": "tooltip", ...props }) });
}
function TooltipTrigger({
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, { "data-slot": "tooltip-trigger", ...props });
}
function TooltipContent({
  className,
  sideOffset = 0,
  children,
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
    TooltipPrimitive__namespace.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__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
      ]
    }
  ) });
}
var defaultRows = [
  { feature: "Design System", optionA: "Modern, Utility-first", optionB: "Classic, Component-based" },
  { feature: "Customization", optionA: "Highly customizable", optionB: "Limited by default" },
  { feature: "Dark Mode", optionA: "Built-in", optionB: "Requires extra setup" },
  { feature: "TypeScript Support", optionA: "First-class", optionB: "Partial" },
  { feature: "Accessibility", optionA: "Focus on a11y", optionB: "Basic" },
  { feature: "Component Count", optionA: "30+", optionB: "25+" },
  { feature: "License", optionA: "MIT", optionB: "MIT" },
  {
    feature: "Premium Components",
    optionA: "Available",
    optionB: {
      value: "Not included",
      tooltip: {
        title: "Premium Only",
        content: "Some advanced components are only available in paid versions or require third-party libraries."
      }
    }
  },
  {
    feature: "Figma Kit",
    optionA: "Yes",
    optionB: {
      value: "No",
      tooltip: {
        title: "Figma Kit Unavailable",
        content: "Does not provide an official Figma kit, but community kits may exist."
      }
    }
  }
];
function ComparisonTableTooltips({
  heading = "Compare Us",
  description = "A modern framework for building websites that is better than the competition.",
  optionALabel = "Our Solution",
  optionBLabel = "Alternative",
  rows = defaultRows,
  tableSlot,
  className,
  containerClassName,
  headingClassName,
  descriptionClassName,
  tableWrapperClassName,
  tableClassName,
  tableHeaderClassName,
  tableCellClassName
}) {
  const renderCellContent = (cell, isHighlighted) => {
    if (typeof cell === "string") {
      return cell;
    }
    if (cell.tooltip) {
      return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
          "span",
          {
            className: cn(
              "cursor-pointer underline decoration-dotted",
              !isHighlighted && "text-muted-foreground"
            ),
            children: cell.value
          }
        ) }),
        /* @__PURE__ */ jsxRuntime.jsxs(TooltipContent, { sideOffset: 8, className: "max-w-xs", children: [
          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 block font-semibold", children: cell.tooltip.title }),
          cell.tooltip.content
        ] })
      ] });
    }
    return cell.value;
  };
  const renderTable = () => {
    if (tableSlot) return tableSlot;
    return /* @__PURE__ */ jsxRuntime.jsxs(Table, { className: cn("rounded border text-left shadow-lg", tableClassName), children: [
      /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
        /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: tableHeaderClassName }),
        /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: cn("bg-muted px-6 py-4 font-semibold", tableHeaderClassName), children: optionALabel }),
        /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: cn("px-6 py-4 font-semibold", tableHeaderClassName), children: optionBLabel })
      ] }) }),
      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { className: "text-foreground", children: rows.map((row, idx) => /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
        /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: cn("px-6 py-4", tableCellClassName), children: row.feature }),
        /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: cn("bg-muted px-6 py-4", tableCellClassName), children: renderCellContent(row.optionA, true) }),
        /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: cn("px-6 py-4", tableCellClassName), children: renderCellContent(row.optionB, false) })
      ] }, 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("h2", { className: cn("mb-4 text-center text-4xl font-semibold", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
    description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8 text-center text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-3xl overflow-x-auto", tableWrapperClassName), children: renderTable() })
  ] }) });
}

exports.ComparisonTableTooltips = ComparisonTableTooltips;
//# sourceMappingURL=comparison-table-tooltips.cjs.map
//# sourceMappingURL=comparison-table-tooltips.cjs.map