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.
 * @param {function(string): void} props.onNavigate - Called with the clicked item's target view id.
 */
export const ButtonList = ({ items, onNavigate }) => {
  return (
    <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>
  );
};