import {
  Icon
} from "./chunk-RWIZ7Q74.js";

// src/components/ContentTable.tsx
import styled from "@emotion/styled";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
function ContentTable({
  columns,
  rows
}) {
  return /* @__PURE__ */ jsxs(StyledContentTable, { children: [
    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
      /* @__PURE__ */ jsx("th", {}),
      columns.map((column) => /* @__PURE__ */ jsx("th", { children: column.title }, column.key))
    ] }) }),
    /* @__PURE__ */ jsx("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsxs("tr", { children: [
      /* @__PURE__ */ jsx("td", { children: row.title }),
      columns.map((column) => {
        const value = row[column.key];
        return /* @__PURE__ */ jsx("td", { children: value === true ? /* @__PURE__ */ jsx(Icon, { name: "CheckmarkCircleGreen", width: 16 }) : value }, column.key);
      })
    ] }, index)) })
  ] });
}
var StyledContentTable = styled.table`
  width: 100%;
  border-collapse: collapse;
  border: 1px solid ${({ theme }) => theme.c1Neutral};
  color: ${({ theme }) => theme.c6Neutral};

  tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
  }

  tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
  }

  th,
  td {
    padding: 26px 12px;
    border: 1px solid #e5e5e5;
  }
  th {
    text-align: center;
  }
  td {
    vertical-align: middle;
    text-align: center;
  }
`;

export {
  ContentTable,
  StyledContentTable
};
