import React from 'react';
import style from './Menu.less';
import classnames from 'classnames';

export function Menu({
  list,
  selectedId,
  onClick,
  className
}: {
  className?: any;
  list: { id: number | string; name: string }[];
  selectedId: number | string;
  onClick: (id) => any;
}) {
  return (
    <div className={classnames(style.menu, className, 'menu_template')}>
      {list.map((item) => (
        <span
          key={item.id}
          className={classnames(style.menu__item, 'menu_item', {
            [style['menu__item--active']]: selectedId === item.id
          })}
          onClick={() => onClick(item.id)}>
          {item.name}
        </span>
      ))}
    </div>
  );
}
