import { j as jsxRuntimeExports } from "./jsx-runtime.CXYVdt5g.js";
import { bN as manifest } from "./use-editor.CurXdZnZ.js";
import "@sinclair/typebox";
import "lodash-es";
import { a as tx } from "./twind.B1qQmF_s.js";
import { b as useBrickStyle } from "./use-section-style.D8_SY6rK.js";
import { B as BrickRoot } from "./BrickRoot.C4Jpjw20.js";
import { u as useBrickProps } from "./use-brick-props.BKk39X7D.js";
function Table(props_) {
  const { brick, editable } = props_;
  const brickProps = useBrickProps(props_);
  const styles = useBrickStyle(brick);
  const columns = brickProps.columns || [];
  const rows = brickProps.rows || [];
  const showHeader = brickProps.showHeader !== false;
  const striped = brickProps.striped !== false;
  const hover = brickProps.hover !== false;
  const fontSize = brickProps.fontSize || "text-sm";
  const formatCellContent = (value, columnType) => {
    if (value === null || value === void 0 || value === "") {
      return "-";
    }
    switch (columnType) {
      case "currency": {
        const numericValue = parseFloat(String(value).replace(/[^0-9.-]/g, ""));
        if (!Number.isNaN(numericValue)) {
          return new Intl.NumberFormat("en-US", {
            style: "currency",
            currency: "USD"
          }).format(numericValue);
        }
        return String(value);
      }
      case "date": {
        const date = new Date(value);
        if (!Number.isNaN(date.getTime())) {
          return date.toLocaleDateString();
        }
        return String(value);
      }
      case "link":
      case "image":
        return String(value);
      default:
        return String(value);
    }
  };
  const renderCellContent = (value, column) => {
    const formattedValue = formatCellContent(value, column.type);
    switch (column.type) {
      case "link": {
        if (formattedValue && formattedValue !== "-") {
          const isExternal = formattedValue.startsWith("http");
          return /* @__PURE__ */ jsxRuntimeExports.jsx(
            "a",
            {
              href: formattedValue,
              target: isExternal ? "_blank" : "_self",
              rel: isExternal ? "noopener noreferrer" : void 0,
              className: "text-blue-600 hover:text-blue-800 underline",
              children: "View"
            }
          );
        }
        return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: "-" });
      }
      case "image": {
        if (formattedValue && formattedValue !== "-") {
          return /* @__PURE__ */ jsxRuntimeExports.jsx(
            "img",
            {
              src: formattedValue,
              alt: "",
              className: "w-12 h-12 object-cover rounded",
              onError: (e) => {
                e.currentTarget.style.display = "none";
              }
            }
          );
        }
        return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: "-" });
      }
      default:
        return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: formattedValue });
    }
  };
  const getAlignmentClass = (align) => {
    switch (align) {
      case "center":
        return "text-center";
      case "right":
        return "text-right";
      default:
        return "text-left";
    }
  };
  const getColumnWidthStyle = (width) => {
    switch (width) {
      case "min":
        return { width: "min-content" };
      case "1fr":
        return { flex: "1" };
      case "2fr":
        return { flex: "2" };
      case "3fr":
        return { flex: "3" };
      default:
        return { width: "auto" };
    }
  };
  if (columns.length === 0) {
    return /* @__PURE__ */ jsxRuntimeExports.jsx(
      BrickRoot,
      {
        brick,
        editable,
        manifest,
        className: tx("flex flex-col grow items-center justify-center text-center", Object.values(styles)),
        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-8", children: editable ? "Add columns to this table in the panel" : "No columns configured" })
      }
    );
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    BrickRoot,
    {
      brick,
      editable,
      manifest,
      className: tx("overflow-x-auto", Object.values(styles)),
      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("table", { className: tx("w-full border-collapse", fontSize), children: [
        showHeader && /* @__PURE__ */ jsxRuntimeExports.jsx("thead", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { className: "border-b-2 border-gray-200", children: columns.map((column, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
          "th",
          {
            className: tx(
              "py-3 px-4 font-semibold text-gray-700 bg-gray-50",
              getAlignmentClass(column.align),
              index === 0 && "rounded-tl-lg",
              index === columns.length - 1 && "rounded-tr-lg"
            ),
            style: getColumnWidthStyle(column.width),
            children: column.header
          },
          index
        )) }) }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: rows.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("td", { colSpan: columns.length, className: "py-8 px-4 text-center text-gray-500", children: editable ? "Add data to this table in the panel" : "No data to display" }) }) : rows.map((row, rowIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
          "tr",
          {
            className: tx(
              "border-b border-gray-100",
              striped && rowIndex % 2 === 0 && "bg-gray-50/50",
              hover && "hover:bg-gray-100/50 transition-colors duration-200"
            ),
            children: columns.map((column, colIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
              "td",
              {
                className: tx(
                  "py-3 px-4",
                  getAlignmentClass(column.align),
                  rowIndex === rows.length - 1 && colIndex === 0 && "rounded-bl-lg",
                  rowIndex === rows.length - 1 && colIndex === columns.length - 1 && "rounded-br-lg"
                ),
                style: getColumnWidthStyle(column.width),
                children: renderCellContent(row[column.field], column)
              },
              colIndex
            ))
          },
          rowIndex
        )) })
      ] })
    }
  );
}
export {
  Table as default
};
//# sourceMappingURL=table.5VUbR1q8.js.map
