import React from 'react';
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">
            <span className="navbar-brand">{this.props.brand}</span>
            <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="Home" lhref="/" />
                    <NavButton name="Film" />
                    <NavButton name="Series" />
                    <NavButton name="About" lhref="/About" />
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
                    <button class="btn1" type="submit">Search</button>
                </form>
            </div>
        </nav>
        );
    }
}

export default Navbar;