import "./App.css";
import { Login } from "./pages/auth/Login.tsx";
import icon from "./paella-icon.png";
import { Outlet, Route, Routes } from "react-router";
import { SignUpPage } from "./pages/signup/SignUpPage.tsx";
import { Register } from "./pages/auth/Register.tsx";
import { Buy } from "./pages/buy/Buy.tsx";
import { NotFound } from "./pages/NotFound.tsx";
import { BuyReturn } from "./pages/buy/BuyReturn.tsx";
import { Grid, Paper } from "@mui/material";
import { AuthenticatedRoute } from "./pages/auth/AuthenticatedRoute.tsx";
import { InvoicePage } from "./pages/invoice/InvoicePage.tsx";

const App = () => (
  <Paper
    elevation={2}
    sx={{
      padding: "50px 30px",
      bgcolor: "lightblue",
      borderRadius: 4,
      maxWidth: "500px",
      minWidth: "350px",
      width: "fit-content",
      margin: "auto",
    }}
  >
    <Grid container direction="column" alignContent="center" spacing={2}>
      <img className="app-logo" src={icon} alt="App logo" />
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />
        <Route
          element={
            <AuthenticatedRoute>
              <Outlet />
            </AuthenticatedRoute>
          }
        >
          <Route path="/signup" element={<SignUpPage />} />
          <Route path="/buy" element={<Buy />} />
          <Route path="/buy/return" element={<BuyReturn />} />
          <Route path="/summary" element={<InvoicePage />} />
        </Route>
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Grid>
  </Paper>
);

export default App;