import { jsx, jsxs } from "react/jsx-runtime";
import { Box, Text } from "ink";
import { StyledBox } from "./StyledBox.js";
function ShortcutsBox({ data }) {
  return /* @__PURE__ */ jsx(StyledBox, { title: "Keyboard Shortcuts", children: data.categories.map((category, catIndex) => /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: catIndex === 0 ? 0 : 1, children: [
    /* @__PURE__ */ jsx(Text, { bold: true, color: "cyan", children: category.name }),
    category.shortcuts.map((shortcut) => /* @__PURE__ */ jsxs(Box, { marginLeft: 2, children: [
      /* @__PURE__ */ jsx(Box, { width: 16, children: /* @__PURE__ */ jsx(Text, { color: "cyan", children: shortcut.keys }) }),
      /* @__PURE__ */ jsx(Text, { color: "gray", children: shortcut.description })
    ] }, shortcut.keys))
  ] }, category.name)) });
}
export {
  ShortcutsBox
};
