import { Route, Routes } from 'react-router-dom';
// import { PrimaryButton } from "./components/button/PrimaryButton";
// import { SecondaryButton } from "./components/button/SecondaryButton";
// import { Checkbox } from "./components/checkbox/Checkbox";
// import { Input } from "./components/input/Input";
// import { Switch } from "./components/switch/Switch";
import Home from './pages/Home';
import Mission from './pages/Mission';
import ArticleEditor from './pages/ArticleEditor';
import Article from './pages/Article';
import ContestEditor from './pages/ContestEditor';
import ProtectedRoute from './components/router/ProtectedRoute';

function App() {
    return (
        <div className="w-full h-full bg-liquid-background flex justify-center">
            <div className="relative w-full max-w-[1600px] h-full ">
                <Routes>
                    <Route element={<ProtectedRoute />}>
                        <Route
                            path="/article/create/*"
                            element={<ArticleEditor />}
                        />
                        <Route
                            path="/contest/create/*"
                            element={<ContestEditor />}
                        />
                    </Route>

                    <Route path="/home/*" element={<Home />} />
                    <Route path="/mission/:missionId" element={<Mission />} />

                    <Route path="/article/:articleId" element={<Article />} />
                    <Route path="*" element={<Home />} />
                </Routes>
            </div>
        </div>
    );
}

export default App;