import PropTypes from 'prop-types';
import { Container } from 'react-bootstrap';
import { Toaster } from 'react-hot-toast';
import { Outlet } from 'react-router-dom';
import { IdProvider } from './components/users/context_hooks/AuthorizationContext.jsx';
import Footer from './components/footer/Footer.jsx';
import Navigation from './components/navigation/Navigation.jsx';

const App = ({ routes }) => {
  return (
    <IdProvider>
      <Navigation routes={routes}></Navigation>
      <Container className='p-2' as="main" fluid>
        <Outlet />
      </Container>
      <Footer/>
      <Toaster position='top-center' reverseOrder={true} />
    </IdProvider>
  );
};

App.propTypes = {
  routes: PropTypes.array,
};

export default App;