import { lazy, Suspense } from 'react';
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import './css/App.css';
import './css/Modal.css';

const Login = lazy(() => import('./Login'));
const Profile = lazy(() => import('./Profile'));
const Registration = lazy(() => import('./Registration'));
const Mainpage = lazy(() => import('./Mainpage'));
const KBBoardsList = lazy(() => import('./KBBoardsList'));
const KBBoard = lazy(() => import('./KBBoard'));
const OtherProfile = lazy(() => import('./OtherProfile'));

const Loader = () => (
    <div className="app-loader">
        <div className="spinner" />
    </div>
);

function App() {
    return (
        <BrowserRouter>
            <Suspense fallback={<Loader />}>
                <Routes>
                    <Route path="/" element={<Navigate to="/main" replace />} />
                    <Route path="/login" element={<Login />} />
                    <Route path="/profile" element={<Profile />} />
                    <Route path="/registration" element={<Registration />} />
                    <Route path="/main" element={<Mainpage />} />
                    <Route path="/kanban-boards-list" element={<KBBoardsList />} />
                    <Route path="/kanban-board/:id" element={<KBBoard />} />
                    <Route path="/profile/:id" element={<OtherProfile />} />
                    <Route path="*" element={<Mainpage />} />
                </Routes>
            </Suspense>
        </BrowserRouter>
    );
}

export default App;