import React from "react";
import { AnnotationsProvider } from "@/context/AnnotationsContext";

interface LayoutProps {
  children: React.ReactNode;
  title?: string;
}

export function Layout({
  children,
  title = "Cloud Reader",
}: LayoutProps): React.ReactElement {
  return (
    <AnnotationsProvider>
      <div className="app-container">
        <header className="app-header">
          <h1 className="app-title">{title}</h1>
          <nav className="app-nav">
            <a href="/" className="nav-link">Home</a>
            <a href="/bookmarks-notes" className="nav-link">Bookmarks & Notes</a>
          </nav>
        </header>
        <main className="app-main">{children}</main>
      </div>
    </AnnotationsProvider>
  );
}