import React, {Component} from 'react';
import NavLink from './NavLink';
import './NavLink.css';
//

class NavMenu extends Component{

    render(){
        let links = [
            {id:'asdf', label:"Home", url:"#home"},
            {id:'fdsa', label:"Products", url:"#products"},
            {id:'qwer', label:"Services", url:"#services"},
            {id:'tyui', label:"Contact Us", url:"#contact"}
        ];
        return (
            <nav className="main-nav">
                {links.map( (item, index)=> (
                    <NavLink key={index} info={ item } />
                ) )    }

                 {/*
                <NavLink info={links[0]}/>
                <NavLink info={links[1]}/>
                <NavLink info={links[2]} />
                <NavLink info={links[3]} />
                */}
                {/*
                <a href="#home" className="main-link">Home</a>
                <a href="#products" className="main-link">Products</a>
                <a href="#services" className="main-link">Services</a>
                <a href="#contact" className="main-link">Contact Us</a>
                */}
            </nav>
        )
    }
}

export default NavMenu;