import { Link, Route, Routes } from "react-router-dom";
import { useEffect, useState } from "react";
import { getToken, setToken } from "./api/client";
import ProjectsPage from "./pages/ProjectsPage";
import ProjectPage from "./pages/ProjectPage";

export default function App() {
  const [token, setTokenState] = useState(getToken());

  useEffect(() => {
    setToken(token);
  }, [token]);

  return (
    <div className="layout">
      <header className="topbar">
        <Link to="/" className="brand">
          GostGenerator Web
        </Link>
        <div className="row">
          <label className="muted">API token</label>
          <input
            style={{ minWidth: 180 }}
            value={token}
            onChange={(e) => setTokenState(e.target.value)}
            placeholder="Bearer token"
          />
        </div>
      </header>
      <Routes>
        <Route path="/" element={<ProjectsPage />} />
        <Route path="/projects/:id" element={<ProjectPage />} />
      </Routes>
    </div>
  );
}
