/** @jsx jsx */

import { PropsWithChildren, jsx, Fragment } from "https://deno.land/x/hono@v4.3.10/middleware.ts"
import { _css } from "../../lib/utils.ts";

export default function Main({ children }: PropsWithChildren) {
    return (
        <Fragment>
            <main style={_css({
                width: "100vw",
                display: "grid",
                placeContent: "center",
            })}>
                <div style={_css({
                    width: "100vw",
                    maxWidth: "1000px",
                    backgroundColor: "#202020",
                    borderLeft: "1px solid #444",
                    borderRight: "1px solid #444",
                    boxShadow: "0px 0px 10px #0008",
                    paddingTop: "2rem"
                })}>
                    <div style={_css({
                        minHeight: "100vh",
                        padding: "2rem"
                    })}>
                    {children}
                    </div>
                </div>
            </main>
            <footer style={_css({
                width: "100vw",
                display: "grid",
                placeContent: "center",
                backgroundColor: "#202020",
                borderTop: "1px solid #444",
                boxShadow: "0px 0px 10px #0008",
                position: "relative",
            })}>
                <div style={_css({
                    width: "100vw",
                    maxWidth: "900px",
                    display: "flex",
                    padding: "1rem"
                })}>
                    Footer
                </div>
            </footer>
        </Fragment>
    )
}