// @ts-nocheck

import gruvboxComputer from "../images/gruvbox-computer.svg"
import { Link } from "react-router"
const Header = () => {
  return (
    <header className="py-6">
      <nav className="bg-sidebar container mx-auto justify-between flex gap-1">
        <div className="scanlined">
          <img src={gruvboxComputer} className="w-10" />
        </div>
        <ul class="flex space-x-4 px-4 py-2">
          <li class="flex flex-col items-center justify-center">
            <Link
              class="text-primary underline underline-offset-3 hover:text-[#689d6a]"
              to="/"
            >
              home
            </Link>
          </li>

          <li class="flex flex-col items-center justify-center">
            <Link
              class="text-primary underline underline-offset-3 hover:text-[#689d6a]"
              to="/posts"
            >
              posts
            </Link>
          </li>
          <li class="flex flex-col items-center justify-center">
            <Link
              class="text-primary underline underline-offset-3 hover:text-[#689d6a]"
              to="/about"
            >
              about
            </Link>
          </li>
        </ul>
      </nav>
    </header>
  )
}

const Footer = () => {
  return (
    <footer className="bg-sidebar container mx-auto px-4 mt-10 mb-8">
      <nav>
        <ul className="flex flex-row justify-start gap-4">
          <li className="flex flex-col items-center justify-center">
            <a
              className="text-primary underline underline-offset-3 hover:text-[#689d6a]"
              href="https://forgejo.systemsobscure.net/thomasabishop"
              target="blank"
            >
              forgejo
            </a>
          </li>
          <li className="">
            <a
              className="text-primary underline underline-offset-3 hover:text-[#689d6a]"
              href="https://fosstodon.org/@systemsobscure"
              target="blank"
            >
              fosstodon
            </a>
          </li>
        </ul>
      </nav>
    </footer>
  )
}

const MainTemplate = ({ children }) => {
  return (
    <div className="antialiased max-w-3xl mt-3 mx-auto text-[#fbf1c7] bg-[#282828] no-scanlines wrapper">
      <main className="flex-auto min-w-0 mt-0 flex flex-col px-2 md:px-0">
        <Header />
        <div>{children}</div>
        <Footer />
      </main>
    </div>
  )
}
export default MainTemplate
