import * as React from "react";
import CategoryList from "../category-list";
import { classes } from "./GeneralCategoryListBase.st.css";
const ICON_NAME_HEADER = "Icon Name";
const DESCRIPTION_HEADER = "Use for";
const DEFAULT_SEARCH_KEYS = ["title", "tags", "aliases"];
const getHeaderTitle = (size) => `${size}x${size}`;
const getSearchKey = (size) => `sizes.${size}`;
const GeneralCategoryListBase = ({
  iconComponents,
  iconsMetadata,
  iconSizes = [24, 18]
}) => {
  const searchKeys = [
    ...DEFAULT_SEARCH_KEYS,
    ...iconSizes.map((size) => getSearchKey(size))
  ];
  const tableHeaderTitles = [
    ...iconSizes.reduce((acc, size) => {
      acc.push(getHeaderTitle(size));
      acc.push(ICON_NAME_HEADER);
      return acc;
    }, []),
    DESCRIPTION_HEADER
  ];
  const mapIconToRow = ({ description, sizes }) => {
    const row = iconSizes.reduce((acc, size) => {
      const Icon = iconComponents[sizes[size]];
      acc.push(Icon && /* @__PURE__ */ React.createElement(Icon, null));
      acc.push(sizes[size]);
      return acc;
    }, []);
    return [...row, description];
  };
  return /* @__PURE__ */ React.createElement(
    CategoryList,
    {
      className: classes.tableList,
      dataHook: "icon-list",
      iconsMetadata,
      ...{
        tableHeaderTitles,
        searchKeys,
        mapIconToRow
      }
    }
  );
};
var GeneralCategoryListBase_default = GeneralCategoryListBase;
export {
  GeneralCategoryListBase_default as default
};
