import type { Child } from "hono/jsx";

type LayoutProps = {
  title: string;
  children: Child;
  refresh?: string;
};

export const Layout = ({ title, children, refresh }: LayoutProps) => (
  <html data-theme="dark">
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      {refresh && <meta http-equiv="refresh" content={refresh} />}
      <title>{title}</title>
      <link rel="stylesheet" href="/pico.css" />
    </head>
    <body>
      <main class="container">
        <nav>
          <ul>
            <li><strong>☎️ Phone</strong></li>
          </ul>
          <ul>
            <li><a href="/">WiFi Setup</a></li>
            <li><a href="/logs">Logs</a></li>
          </ul>
        </nav>
        {children}
      </main>
    </body>
  </html>
);
