import React from 'react';
import { NavLink } from 'react-router-dom';
import { Menu } from 'semantic-ui-react';

import { mainMenuItems } from '../../constants/menuItems';

const MainMenu = () =>
    (<Menu size={'huge'}>
        {
            mainMenuItems.map(mainMenuItem => {
                if (!mainMenuItem.showInMenu){
                    return null;
                } else {
                    return (
                    <Menu.Item key={mainMenuItem.id}
                               as={NavLink}
                               to={mainMenuItem.url}
                               exact
                    >
                        {mainMenuItem.title}
                    </Menu.Item>)
                }})
        }
    </Menu>);

export default MainMenu;