// components/Menu.js
import { Tag, For } from "sigpro";

export const Menu = (props, children) => {
  children === undefined && (children = props, props = {});
  return Tag("ul", { ...props, class: `menu ${props.class ?? ''}` }, children);
};

export const MenuItems = (props) => {
  const { items, keyFn = (item, idx) => item.id ?? idx } = props;
  const itemsSignal = typeof items === "function" ? items : () => items || [];

  const renderItem = (item) => {
    if (item.children) {
      return Tag("li", {}, [
        Tag("details", {}, [
          Tag("summary", {}, item.label),
          Tag("ul", {}, MenuItems({ items: item.children }))
        ])
      ]);
    }
    return Tag("li", {}, Tag("a", {
      href: item.href,
      onclick: item.onclick ? (e) => {
        if (!item.href) e.preventDefault();
        item.onclick(e);
      } : null
    }, item.label));
  };

  return For(itemsSignal, renderItem, keyFn);
};