import * as React from "react";
import Sizes from "./Sizes";
import CategoryList from "../category-list";
import { getIconSizeKeys } from "../../utils";
const SystemCategoryListBase = ({
  iconComponents,
  iconsMetadata
}) => {
  const tableHeaderTitles = ["Icon Name", "Sizes", "Use for"];
  const mapIconToRow = ({
    title,
    sizes,
    description
  }) => {
    const iconDescriptors = [];
    for (const [size, name] of Object.entries(sizes)) {
      const Icon = iconComponents[name];
      iconDescriptors.push({
        size,
        name,
        Icon
      });
    }
    return [title, /* @__PURE__ */ React.createElement(Sizes, { sizes: iconDescriptors }), description];
  };
  const iconSizeKeys = getIconSizeKeys(iconsMetadata);
  const searchKeys = ["title", ...iconSizeKeys, "tags", "aliases"];
  return /* @__PURE__ */ React.createElement(
    CategoryList,
    {
      dataHook: "icon-list",
      iconsMetadata,
      ...{
        tableHeaderTitles,
        searchKeys,
        mapIconToRow
      }
    }
  );
};
var SystemCategoryListBase_default = SystemCategoryListBase;
export {
  SystemCategoryListBase_default as default
};
