import React from 'react';

import Icon from '../../Icon/index';

import { IElementMenusProps } from '../../../type/LargeScreenElement';

const ElementMenus: React.FC<IElementMenusProps> = (props) => {
  const { list = [], click } = props;

  return (
    <div className="zl-ls-element-content-menus">
      <ul>
        {list.map((item) => {
          return (
            <li
              key={item?.key}
              className={`zl-ls-element-content-icon ${
                item?.disabled ? "disabled" : item?.selected ? 'current' : ''
              }`}
              onClick={() => click?.(item)}
              style={{cursor: item?.disabled ? 'not-allowed' : 'pointer'}}
            >
              <Icon
                name={item?.icon}
                style={{ width: '20px', height: '20px' }}
              />
              {item?.title ? <span>{item?.title}</span> : <></>}
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default ElementMenus;