import definition from "./schema.js";
import { ButtonList } from "./ButtonList";

/**
 * Element definition consumed by elements/registry.js (pattern:
 * StoryTitle/index.js). Buttons reference sibling view ids (e.g.
 * "cancer-1-1"); the component doesn't navigate itself, it reports the
 * chosen id back to the page via `onNavigate`.
 */
export default {
  ...definition,
  component: ButtonList,
  adapter: ({ buttons }, { onNavigate }) => ({
    items: (buttons || []).map((button) => ({
      content: { label: button.label },
      targetViewId: button.id,
    })),
    onNavigate,
  }),
};