import "./ButtonList.scss";

import { UIMCIcon } from "@ui-marcom/react/icon";

/**
 * Vertical list of navigation buttons ("buttonList" element type). Buttons
 * don't navigate themselves - they report the chosen view id to the page.
 *
 * @param {Object} props
 * @param {Array<{content: {label: string}, targetViewId: string, icon: string}>} props.items - One entry per button. `icon` is optional and rendered when present, but the registry adapter (index.js) never populates it from content today, so it's effectively unused via the normal content-authoring path.
 * @param {function(string): void} props.onNavigate - Called with the clicked item's target view id.
 */
export const ButtonList = ({ items, onNavigate }) => {
  return (
    <div className="container__button-list">
      <div className="button-list">
        {items.map((item, index) => (
          <button
            key={index}
            type="button"
            className={`button-list__item`}
            onClick={() => item.targetViewId && onNavigate(item.targetViewId)}>
            {item.icon && (
              <UIMCIcon slot="prefix" name={item.icon} class="button-list__icon"></UIMCIcon>
            )}
            <span className="button-list__item-text">{item.content.label}</span>
          </button>
        ))}
      </div>
    </div>
  );
};