---
import Comments from "~/components/astro/comments.astro"
import Header from "~/components/astro/header.astro"
import Navigation from "~/components/astro/nav.astro"
import BaseLayout from "~/layouts/base.astro"

const { title, description, ogImage, needComment } = Astro.props
const filename = Astro.url.pathname.split("/").filter(Boolean).pop() ?? ""
const openGraphImage = !ogImage ? `/og/${filename}.png` : ogImage
---

<BaseLayout
  title={title}
  description={description}
  ogImage={openGraphImage}
  needComment={needComment}
>
  <main class="max-auto mb-10 w-full max-w-3xl">
    <Header />
    <Navigation />
    <slot />
    <div class="my-20">
      {needComment && <Comments />}
    </div>
  </main>
</BaseLayout>