import React from 'react';
import PropTypes from 'prop-types';
import Icon from '../Icon';
import Translate from '../Translate';
import './style.scss';

const Menu = ({items, goToState, canAccess}) => (
    <div className="Menu">
        {items.filter((item) => item.link || canAccess(item.state)).map((item) => (
            <button
                className={`Menu__item ${item.isDisabled && 'Menu__item_disabled'} ${item.hasMark && 'Menu__item_marked'} ${item.isActive && 'Menu__item_active'}`}
                id={`to${item.id}`}
                key={item.key}
                onClick={() => goToState(item)}
                disabled={item.isDisabled}
            >
                <Icon
                    classNames="Menu__icon"
                    name={item.icon}
                    size="small"
                    color={item.isActive ? 'brand' : 'white'}
                />
                <Translate tag={item.key} />
            </button>
        ))}
    </div>
);

Menu.propTypes = {
    items: PropTypes.array.isRequired,
    goToState: PropTypes.func.isRequired,
    canAccess: PropTypes.func.isRequired,
};

export default Menu;