import "./styles/Layout.css";
import "./styles/extra.css";
import React from "react";
import { NavLink, Route, Routes } from "react-router-dom";
import Welcome from "./pages/Welcome";
import Navbar from "react-bootstrap/Navbar";
import { Container, Nav, NavbarBrand } from "react-bootstrap";
import NavbarToggle from "react-bootstrap/esm/NavbarToggle";
import NavbarCollapse from "react-bootstrap/esm/NavbarCollapse";
import Dashboard from "./pages/Dashboard";
export default class Layout extends React.Component {
    render() {
        return (
            <div id="app">
                <header>
                    <Navbar bg="light" expand="md">
                        <Container>
                            <NavbarBrand href="/">Sports Matcher</NavbarBrand>
                            <NavbarToggle aria-controls="navigation"></NavbarToggle>
                            <NavbarCollapse id="main-nav">
                                <Nav className="me-auto">
                                    <li className="nav-item">
                                        <NavLink className="nav-link" to="/" >Home</NavLink>
                                    </li>
                                </Nav>
                            </NavbarCollapse>
                        </Container>
                    </Navbar>
                </header>
                <main>
                    <Routes>
                        <Route path="/" element={<Welcome></Welcome>} />
                        <Route path="/Dashboard" element={<Dashboard></Dashboard>} />
                    </Routes>
                </main>
                <footer>

                </footer>
            </div>
        );
    }
}