import React from 'react';
import '../styles/App.css';
import { NavLink } from 'react-router-dom';

//компонент с кнопками навигации по сайту
const MainHead = (props) => {
    
    return(
        <div>
            <div>
                <h1 className="Main-label">Мир танков</h1>
            </div>
            <form className="collapse navbar-collapse">
                <nav className="navbar navbar-expand-lg justify-content-around">
                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" style={{backgroundColor: '#379dc2'}}>
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul className="Main_head navbar-nav me-auto align-items-center">
                        {
                            props.links.map(route =>
                                <li key={route.path}
                                    className="nav-item">
                                        <div className="Button_Main_Group container p-2" div="div">
                                            <NavLink className="nav-link btn border border-3 border-dark fs-4 lh-15" role="button"
                                                to={route.path}>
                                                    {route.label}
                                            </NavLink>
                                        </div>
                                </li>
                            )
                        }
                        </ul>
                    </div>
                </nav>
            </form>
        </div>
    )
}

export default MainHead;