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

function cn(...inputs) {
  return twMerge(clsx(inputs));
}
var EMPTY_PLACEHOLDER = "\u2014";
function CompareTable({
  subjects,
  attributes,
  highlightDifferences = false,
  onCellClick,
  className,
  ...rest
}) {
  const warnedRef = React.useRef(false);
  const nodeEnv = globalThis.process?.env?.NODE_ENV;
  if (nodeEnv !== "production" && !warnedRef.current) {
    const subjectIds = new Set(subjects.map((s) => s.id));
    for (const attr of attributes) {
      for (const valueId of Object.keys(attr.values)) {
        if (!subjectIds.has(valueId)) {
          warnedRef.current = true;
          console.warn(
            `[hex-core/CompareTable] Attribute "${attr.id}" has a value for subjectId "${valueId}" that isn't in the subjects array. The cell will not render.`
          );
          break;
        }
      }
      if (warnedRef.current) break;
    }
  }
  return /* @__PURE__ */ jsx(
    "div",
    {
      ...rest,
      "data-hex-compare-table": true,
      className: cn("overflow-x-auto rounded-lg border", className),
      children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-sm", children: [
        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { "data-hex-compare-table-header": true, children: [
          /* @__PURE__ */ jsx(
            "th",
            {
              scope: "col",
              className: "sticky left-0 z-10 border-b bg-card px-3 py-2 text-left text-xs font-medium text-muted-foreground"
            }
          ),
          subjects.map((subject) => /* @__PURE__ */ jsx(
            "th",
            {
              scope: "col",
              "data-hex-compare-table-subject": true,
              "data-subject-id": subject.id,
              className: "border-b bg-card px-3 py-2 text-left font-semibold",
              children: subject.label
            },
            subject.id
          ))
        ] }) }),
        /* @__PURE__ */ jsx("tbody", { children: attributes.map((attr) => {
          const reference = highlightDifferences ? subjects.map((s) => attr.values[s.id]).find((v) => v != null && v !== "") : void 0;
          return /* @__PURE__ */ jsxs("tr", { "data-hex-compare-table-row": true, "data-attribute-id": attr.id, children: [
            /* @__PURE__ */ jsx(
              "th",
              {
                scope: "row",
                className: "sticky left-0 z-10 border-b bg-card px-3 py-2 text-left font-medium",
                children: attr.label
              }
            ),
            subjects.map((subject) => {
              const raw = attr.values[subject.id];
              const isEmpty = raw == null || raw === "";
              const displayValue = isEmpty ? EMPTY_PLACEHOLDER : raw;
              const isComparable = (typeof raw === "string" || typeof raw === "number" || typeof raw === "boolean") && (typeof reference === "string" || typeof reference === "number" || typeof reference === "boolean");
              const differs = highlightDifferences && !isEmpty && reference !== void 0 && isComparable && String(raw) !== String(reference);
              const interactive = Boolean(onCellClick);
              return /* @__PURE__ */ jsx(
                "td",
                {
                  "data-hex-compare-table-cell": true,
                  "data-subject-id": subject.id,
                  "data-attribute-id": attr.id,
                  "data-differs": differs,
                  className: cn(
                    "border-b px-3 py-2 align-top",
                    differs && "bg-accent/30 text-accent-foreground",
                    isEmpty && "text-muted-foreground",
                    interactive && "cursor-pointer transition-all duration-[var(--duration-normal,200ms)] ease-out active:scale-[0.98] hover:bg-muted/40"
                  ),
                  onClick: interactive ? () => onCellClick?.(subject.id, attr.id) : void 0,
                  children: displayValue
                },
                subject.id
              );
            })
          ] }, attr.id);
        }) })
      ] })
    }
  );
}

export { CompareTable };
//# sourceMappingURL=compare-table.js.map
//# sourceMappingURL=compare-table.js.map