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

const head = ({ title }) => html`
  <title>About Page - ${sanitize(title)}</title>
`

const body = async (ctx, { path, title }) => html`
  ${await ctx.renderBody(Header, { path, title })}
  <main id="app">
    <section>
      <h1>About Page - ${sanitize(title)}</h1>
      <p>
        Veniam quis commodo ad Lorem do proident et elit labore amet incididunt et culpa. Non ex in deserunt veniam minim pariatur incididunt consectetur. Aliqua occaecat irure eu est.
      </p>
      <ul>
        <li>Anim reprehenderit enim amet eu id esse duis exercitation nulla fugiat sunt esse exercitation.</li>
        <li>In non ex esse et fugiat excepteur aliquip ea.</li>
        <li>Reprehenderit aliqua aute cupidatat enim ipsum eu.</li>
        <li>Consectetur exercitation exercitation excepteur quis in qui qui magna cillum sint.</li>
      </ul>
    </section>
  </main>
  ${await ctx.renderBody(Footer, { path, title })}
`

const styles = css`
  main {
    background-color: #fff;
  }
`

export async function AboutPage (ctx, { path, title }) {
  ctx.addCSS(base)
  ctx.addCSS(styles)
  ctx.addHead(head({ title }))
  ctx.setBody(await body(ctx, { path, title }))

  return ctx
}