import React, { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { Route, Routes } from 'react-router-dom'
import Layout from './components/Layout/Layout'
import PrivateRoute from './utils/PrivateRoute'
import ErrorPage from './containers/ErrorPage/ErrorPage'
import AuthorizeForm from './containers/AuthorizeForm/AuthorizeForm'
import MainPage from './containers/MainPage/MainPage'
import UserGallery from './containers/UserGallery/UserGallery'
import AddForm from './containers/AddForm/AddForm'

const App: React.FunctionComponent = (): React.ReactElement => {
  return (
    <Routes>
      <Route element={<Layout/>}>
        <Route path='/' element={<MainPage/>}/>
        <Route path='/user/:id' element={<UserGallery/>}/>
        <Route path='/authorize' element={<AuthorizeForm/>}/>
        <Route element={<PrivateRoute/>}>
          <Route path='/add-photo' element={<AddForm/>}/>
        </Route>
        <Route path='*' element={<ErrorPage/>}/>
      </Route>
    </Routes>
  )
}

export default App
