import React from 'react';
import PropTypes from 'prop-types';
import styles from '../styles/app.scss';
import { Link } from 'react-router';
import Strings from '../model/Strings';

const navItems = Strings.nav.items.map((item, x) =>
    <li key={x}>
        <Link to={'/' + item.name}>
            <img src={item.icon} />
            <span>{item.name}</span>
        </Link>
    </li>
);

const Nav = ({ isMenuOpen }) => {
    let s = '';
    s = isMenuOpen ? styles.opened : styles.closed;
    return (<nav id={styles.main_nav} className={s}>
        <ul className={styles.nav_menu_ul}>
            { navItems }
        </ul>
    </nav>);
};

Nav.propTypes = {
    isMenuOpen: PropTypes.bool
};

export default Nav;
