import "./styles/reset.css";
import "./styles/App.css";
import { Outlet } from "react-router";
import { Link } from "react-router";
import { useGuides } from "./lib/contexts/guide.context";

function App() {
  const { guides } = useGuides();

  return (
    <>
      <header>
        <h1 className="main-title">
          <Link to="/">SnapSteps</Link>
        </h1>
        <nav>
          <Link className="create-new-guide-btn" to="/new-guide">
            Create New Guide
          </Link>

          <h2>Guides</h2>
          <ul className="guide-list">
            {guides.map((guide) => (
              <li key={guide.id}>
                <Link to={`/guide/${guide.id}`}>{guide.title}</Link>
              </li>
            ))}
          </ul>
          <Link to="/settings">Settings</Link>
        </nav>
      </header>

      <main>
        <Outlet />
      </main>

      <footer>SnapSteps &copy; {new Date().getFullYear()}</footer>
    </>
  );
}

export default App;