import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import "./styles.css";

import Login from "./components/login/Login";
import Home from "./components/home/Home";
import Contacts from "./components/contacts/Contacts";
import CalendarPage from "./components/calendar/CalendarPage";
import { ThemeProvider } from "@emotion/react";
import ProtectedRoute from "./ProtectedRoute";
import MeetingDetails from "./components/meeting-details/MeetingDetails";

import Theme from "./Theme";

import "./style/App.css";

const App: React.FC = () => {
  return (
    <ThemeProvider theme={Theme}>
      <Router>
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route element={<ProtectedRoute />}>
            <Route path="/" element={<Home />} />
            <Route path="/contacts/" element={<Contacts />} />
            <Route path="/contacts/:uuid" element={<Contacts />} />
            <Route path="/calendar" element={<CalendarPage />} />
          </Route>
        </Routes>
      </Router>
      <MeetingDetails />
    </ThemeProvider>
  );
};

export default App;