import { Link, Outlet } from "react-router-dom";
import { useSiteConfig } from "./ConfigContext";
import { AdminGate } from "./components/AdminGate";
import { GeoFooter } from "./components/GeoFooter";

export function Layout() {
  const { siteTitle, siteTitleEn } = useSiteConfig();

  return (
    <>
      <main>
        <header className="site-header">
          <div className="site-brand">
            <AdminGate>
              <img
                className="site-logo"
                src="/logo.png"
                alt=""
                width={40}
                height={40}
                decoding="async"
              />
            </AdminGate>
            <div className="site-titles">
              <Link to="/" className="site-title-link">
                {siteTitle}
              </Link>
              <span className="site-title-en">{siteTitleEn}</span>
            </div>
          </div>
        </header>
        <Outlet />
      </main>
      <footer className="site-footer">
        <p>萌芽小窝-一个安静的小地方 @2026-至今</p>
        <GeoFooter />
      </footer>
    </>
  );
}
