import type { FC } from "hono/jsx"
import { GIT_SHA } from "../config"

export const Layout: FC = async ({ children, title }) => (
  <html lang="en">
    <head>
      <title>{title || "NOSE (Pluto)"}</title>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />

      <link href="/css/reset.css" rel="stylesheet" />
      <link href="/css/main.css" rel="stylesheet" />
      <link href="/css/game.css" rel="stylesheet" />

      <script dangerouslySetInnerHTML={{
        __html: `
          window.NODE_ENV = ${process.env.NODE_ENV ? "'" + process.env.NODE_ENV + "'" : 'undefined'};
          window.GIT_SHA = "${GIT_SHA}";
      `}} />

      <script type="importmap" dangerouslySetInnerHTML={{ __html: `{ "imports": { "@/": "/" } }` }} />
      <script src={process.env.NODE_ENV === "production" ? `/bundle.js?${GIT_SHA}` : "/js/main.js"} type="module" async></script>
    </head>
    <body data-mode="tall">
      <main>
        <div id="content" style="display:none">
          {children}
        </div>
      </main>
    </body>
  </html>
)