import type { Metadata } from "next";
import Nav from "@/components/Nav";
import Footer from "@/components/Footer";

export async function generateMetadata(): Promise<Metadata> {
  return {
    title: "Blog",
    description: "Notes, write-ups and behind-the-scenes from Hunter",
  };
}

export default async function BlogLayout({children}: {
  children: React.ReactNode;
}) {

  return (
    <div style={{ minHeight: "100vh", paddingBottom: 36 }}>

      <div
        style={{
          maxWidth: 880,
          margin: "0 auto",
          padding: "0 24px",
          transition: "all 0.5s cubic-bezier(0.16, 1, 0.3, 1)",
        }}>

        <header
          style={{
            padding: "24px 0 0",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}>

          <div
            style={{
              fontFamily: "var(--mono)",
              fontSize: 14,
              fontWeight: 700,
              color: "var(--accent)",
              letterSpacing: "-0.02em",
            }}>
          </div>

        </header>

        <Nav section={"blog"} />

        <main>
          {children}
        </main>
      </div>

      <Footer />
    </div>
  );
}