import React from "react";
import { useTranslation } from "react-i18n-lite";

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

export function Layout({
  children,
  title,
}: LayoutProps): React.ReactElement {
  const { t } = useTranslation();
  const pageTitle = title ?? t("common.appName");

  return (
    <div className="app-container">
      <header className="app-header">
        <h1 className="app-title">{pageTitle}</h1>
        <nav className="app-nav">
          <a href="/" className="nav-link">{t("annotations.home")}</a>
          <a href="/bookmarks-notes" className="nav-link">{t("annotations.bookmarksNotes")}</a>
        </nav>
      </header>
      <main className="app-main">{children}</main>
    </div>
  );
}
