import { ghPagesBasePath, html, type Html } from "@mastrojs/mastro";
import { Header } from "./Header.ts";
import { Footer } from "./Footer.ts";

export const basePath = ghPagesBasePath();

interface Props {
  title?: string;
  children: Html;
}

export const Layout = (props: Props) => html`
  <!doctype html>
  <html lang="en">
    <head>
      <title>${props.title}</title>
      <meta charset="UTF-8" />
      <link rel="stylesheet" href=${basePath + "/styles.css"} />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body
      class="bg-stone-900 text-stone-200 max-w-2xl flex flex-col mx-auto h-screen border-l-8 border-dashed pl-4"
    >
      ${Header()}

      <main class="flex-1 prose prose-stone prose-invert">
        ${props.children}
      </main>

      ${Footer()}
    </body>
  </html>
`;
