import Button from 'react-bootstrap/Button';
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
import './TopNavigation.css';
import Form from 'react-bootstrap/Form';
import Dropdown from 'react-bootstrap/Dropdown'
import DropdownButton from 'react-bootstrap/DropdownButton';
import HamburgerIcon from './HumburgerIcon';

import { useState } from 'react';
export default function TopNavigation() {
  const [show, setShow] = useState(false);
  const handleOpen = () => setShow(true);
  const handleClose = () => setShow(false);

    return (
      <>

              {['lg'].map((expand) => (
          <Navbar key={expand} expand={expand} className="white custom-navbar navbar-boarder">
          <Container fluid className='d-flex justify-content-space-between'>
            <Navbar.Brand style={{fontSize: 40}} className='text-navy ' href="#"><strong>Book a room</strong></Navbar.Brand>
              {/* <Button className ='btn-flat'>Book</Button> */}
              
            <DropdownButton as={HamburgerIcon} >
      <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
      <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
      <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
    </DropdownButton>

              
          </Container>
        </Navbar>)) }
        
        
        
        
        </>
        
    )
}