import React from 'react';
import {Link} from 'react-router-dom';
import NavButton from './Buttons';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './Navbar.css';

class Navbar extends React.Component {
    render() {
        return (
        <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
            <Link to="/"><span className="navbar-brand">LORD//{this.props.brand}</span></Link>
            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navButtons" aria-controls="navButtons" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse navbar-collapse flex" id="navButtons">
                <ul className="navbar-nav nav-mod">
                    <NavButton name="Film" lhref="/Film" />
                    <NavButton name="Anime" lhref="/Anime" />
                    <NavButton name="Serie TV" lhref="/Serietv" />
                    <NavButton name="Immagini" lhref="/Immagini" />
                    <NavButton name="Musica" lhref="/Musica" />
                    <NavButton name="Giochi" lhref="/Giochi" />
                    <NavButton name="Programmi" lhref="/Programmi" />
                </ul>
                <form className="form-inline my-2 my-lg-0">
                    <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
                    <button className="btn1" type="submit">Search</button>
                </form>
            </div>
        </nav>
        );
    }
}

export default Navbar;
