import { THEME } from '~/assets/global'
import Link from 'next/link'
import { ReactNode } from 'react'

const Layout = ({ children }: { children: ReactNode }) => {
  return (
    <main>
      <header>
        <h1>{THEME.title}</h1>

        <nav>
          <ul>
            <li>
              <Link href="/">
                <a>Home</a>
              </Link>
            </li>

            {(THEME.nav || []).map((n) =>
              n.to ? (
                <Link href={n.to} key={n.name}>
                  <a>{n.name}</a>
                </Link>
              ) : (
                <a
                  href={n.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  key={n.name}
                >
                  {n.name}
                </a>
              )
            )}
          </ul>

          <form>
            <input name="q" type="search" placeholder="Search..." />
            <div className="icon">🔎</div>
          </form>
        </nav>
      </header>
      {children}

      <style jsx>{`
        nav ul {
          display: inline-block;
        }

        form {
          float: right;
          max-width: 300px;
          position: relative;
        }

        form .icon {
          position: absolute;
          right: 5px;
          top: 5px;
        }

        input {
          padding-right: 1.5em;
        }
      `}</style>
    </main>
  )
}

export default Layout