// components/Menu.js
import { $html, $for } from "../sigpro.js";
import { val, ui } from "../core/utils.js";

/**
 * Menu component
 * 
 * daisyUI classes used:
 * - menu, menu-dropdown, menu-dropdown-show
 * - bg-base-200, rounded-box
 * - details, summary, ul, li, a
 * - mr-2, active
 */
export const Menu = (props) => {
  const { class: className, items, ...rest } = props;

  const renderItems = (items) =>
    $for(
      () => items || [],
      (it) =>
        $html("li", {}, [
          it.children
            ? $html("details", { open: it.open }, [
                $html("summary", {}, [it.icon && $html("span", { class: "mr-2" }, it.icon), it.label]),
                $html("ul", {}, renderItems(it.children)),
              ])
            : $html("a", { class: () => (val(it.active) ? "active" : ""), onclick: it.onclick }, [
                it.icon && $html("span", { class: "mr-2" }, it.icon),
                it.label,
              ]),
        ]),
      (it, i) => it.label || i,
    );

  return $html("ul", { ...rest, class: ui('menu bg-base-200 rounded-box', className) }, renderItems(items));
};