'use strict';
import { jsxs, jsx } from 'react/jsx-runtime';
import { NavigationItemComponent } from './navigation-item/NavigationItem.js';
import { List } from '../list/List.js';
import { Button } from '../button/Button.js';
import { Icon, iconNames } from '../icon/Icon.js';
import { cn } from '../../../fd-toolbox/lib/utils.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function Navigation({
  config,
  open,
  onOpenClick
}) {
  return /* @__PURE__ */jsxs(List, {
    className: cn("bg-background w-48 text-sm transition duration-300 ease-in-out", open ? "translate-x-0" : "-translate-x-56"),
    children: [/* @__PURE__ */jsxs("div", {
      className: "flex items-center justify-start",
      children: [onOpenClick && /* @__PURE__ */jsx(Button, {
        variant: "icon",
        onClick: onOpenClick,
        className: "absolute -left-2",
        children: /* @__PURE__ */jsx(Icon, {
          name: iconNames.caretLeftIcon
        })
      }), config.title && /* @__PURE__ */jsx("p", {
        className: "text-muted-foreground m-2 cursor-pointer p-2 font-bold",
        children: config.title
      })]
    }), config.navigationItems.map(navigationItem => /* @__PURE__ */jsx(NavigationItemComponent, {
      navigationItem
    }, navigationItem.targetHtmlElementId))]
  });
}
__name(Navigation, "Navigation");

export { Navigation };
