import { html, css, sanitize } from '../templater.js'
import { NavBar } from '../components/NavBar.js'
import base from '../styles/base.js'

const body = async (ctx, { path, title }) => html`
  <header>
    <h3 style="flex: 1;">Title: ${sanitize(title)}</h3>
    ${await ctx.renderBody(NavBar, { path })}
  </header>
`

const styles = css`
  header {
    display: flex;
    align-items: center;
  }
`

export async function Header (ctx, { path, title }) {
  ctx.addCSS(styles)
  ctx.setBody(await body(ctx, { path, title }))

  return ctx
}