/** @jsx jsx */

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

// 
export default function Heading({ username }: PropsWithChildren<{username: string | null}>) {
    return (
        <header style={_css({
            width: "100vw",
            display: "grid",
            placeContent: "center",
            backgroundColor: "#202020",
            borderBottom: "1px solid #444",
            boxShadow: "0px 0px 10px #0008",
            position: "fixed",
        })}>
            <div style={_css({
                width: "100vw",
                maxWidth: "900px",
                display: "flex",
            })}>
                <div style={_css({
                    borderLeft: '1px solid #444',
                    borderRight: '1px solid #444',
                })}>
                    <h1 style={_css({
                        margin: "0.3rem",
                        marginLeft: "3rem",
                        marginRight: "3rem",
                    })}>TwiFeur</h1>
                </div>
                <MenuItem name="Content" location="/home"/>
                <MenuItem name="About" location="/about"/>
                <MenuItem name="User" location="/user"/>
                {(username !== null) && <MenuItem name={`Logout (${username})`} location="/api/logout" />}
            </div>
        </header>
    )
}

function MenuItem({ name, location }: { name: string, location: string }) {
    return (
        <a href={location} style={_css({
            borderRight: '1px solid #444',
            textDecoration: 'none',
            color: 'unset'
        })}>
            <h3 style={_css({ margin: "0.7rem" })}>{name}</h3>
        </a>
    )
}