import {
  Button
} from "./chunk-U7JPP7WJ.js";
import {
  Flex
} from "./chunk-25HMMI7R.js";
import {
  Typo
} from "./chunk-52MVZ6AN.js";

// src/molecules/navigation.tsx
import { jsx, jsxs } from "react/jsx-runtime";
function Navigation({
  items,
  fontColor,
  backgroundColor,
  activeKey
}) {
  return /* @__PURE__ */ jsx(
    Flex,
    {
      direction: "column",
      gap: "4",
      pr: "3",
      style: {
        color: fontColor || "var(--white-a12)",
        backgroundColor: backgroundColor || "var(--black-a12)"
      },
      children: items == null ? void 0 : items.map((item) => {
        const { key, title, icon, itemRender, onClick, children } = item;
        return /* @__PURE__ */ jsxs(Flex, { direction: "column", onClick, children: [
          itemRender ? itemRender(item) : /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", height: "36px", pl: "4", pr: "4", children: [
            icon,
            /* @__PURE__ */ jsx(Typo, { variant: "subtitle", children: title })
          ] }),
          children == null ? void 0 : children.map((menu) => {
            return menu.itemRender ? menu.itemRender(menu) : /* @__PURE__ */ jsx(
              Button,
              {
                className: `tipp-navigation-button ${activeKey === menu.key ? "active" : ""}`,
                ml: "37px",
                onClick: menu.onClick,
                size: "large",
                style: {
                  color: "var(--white-a12)",
                  height: "32px",
                  paddingLeft: "var(--space-2)"
                },
                children: menu.title
              },
              menu.key
            );
          })
        ] }, key);
      })
    }
  );
}

export {
  Navigation
};
//# sourceMappingURL=chunk-TOBTSM5I.js.map