import { jsx, jsxs } from "react/jsx-runtime";
import { Box, Text } from "ink";
import { StyledBox } from "./StyledBox.js";
function HelpBox({ data }) {
  const categories = data.commands.reduce(
    (acc, cmd) => {
      const cat = cmd.category || "Other";
      if (!acc[cat]) {
        acc[cat] = [];
      }
      acc[cat].push(cmd);
      return acc;
    },
    {}
  );
  return /* @__PURE__ */ jsx(StyledBox, { title: "Available Commands", children: Object.entries(categories).map(([category, commands]) => /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
    /* @__PURE__ */ jsx(Text, { bold: true, color: "gray", children: category }),
    commands.map((cmd) => /* @__PURE__ */ jsxs(Box, { marginLeft: 2, children: [
      /* @__PURE__ */ jsx(Box, { width: 16, children: /* @__PURE__ */ jsxs(Text, { color: "cyan", children: [
        "/",
        cmd.name
      ] }) }),
      /* @__PURE__ */ jsx(Text, { color: "gray", children: cmd.description })
    ] }, cmd.name))
  ] }, category)) });
}
export {
  HelpBox
};
