import "./App.css";

import { useState } from "react";

import { BrowserRouter, Routes, Route, Link } from "react-router";
import { Toaster } from "react-hot-toast";

import { CreateEditPostPage } from "./CreateEditPostPage.tsx";
import { ListPage } from "./ListPage";

const App = () => {
	return (
		<div className="content bg-fuchsia-200">
			<Toaster />
			<div className="flex flex-col gap-8">
				<div className="flex place-content-between flex-row px-16 py-8 sticky top-0">
					<p className="text-3xl font-bold">ppq</p>
					<Link to="/create">
						<h1>upload a new picture</h1>
					</Link>
				</div>
				<Routes>
					<Route path="/" element={<ListPage />} />
					<Route
						path="/edit/:uuid"
						element={<CreateEditPostPage />}
					/>
					<Route
						path="/create"
						element={<CreateEditPostPage isCreate />}
					/>
				</Routes>
			</div>
		</div>
	);
};

export default App;