import MainTemplate from "@/templates/MainTemplate"
import PostListing from "@/containers/PostListing"
import { usePosts } from "@/hooks/usePosts"
import gruvboxComputer from "../images/gruvbox-computer.svg"
// import TodayILearned from "@/containers/TodayILearned"

const HomePage = () => {
  const { posts } = usePosts()
  return (
    <MainTemplate>
      <div className="container mx-auto p-4 grow">
        <div className="space-my-8">
          <section className="space-y-4">
            <div className="gap-6 flex flex-col items-center sm:flex-row">
              <div className="scanlined">
                <img src={gruvboxComputer} className="md:w-80 w-50" />
              </div>
              <div>
                <h1 className="text-4xl font-bold py-3 monospaced-font text-center sm:text-left md:text-left">
                  <div className="scanlined inline-block italic py-1 px-2">
                    systems obscure
                  </div>
                </h1>
                <p className="leading-relaxed text-center sm:text-left md:text-left">
                  Software engineer at ITV, formerly BBC. This is my technical
                  scrapbook and digital garden.
                </p>
              </div>
            </div>
          </section>
        </div>
      </div>

      <div className="container mx-auto p-4 grow">
        <div className="space-my-8">
          <section className="container">
            <h2 className="text-2xl font-medium mb-4 text-[#fb4934]!">
              Projects
            </h2>
            <ul>
              <li className="pb-2">
                <a
                  className="underline underline-offset-3 text-[18px] text-primary hover:text-primary/80"
                  href="https://eolas.systemsobscure.net"
                  target="_blank"
                >
                  eolas
                </a>
              </li>
              <li>
                <p className="text-muted text-sm">
                  A self-hosted, full-stack application created with NodeJS,
                  Python and React that serves as a frontend for my
                  Zettelkasten.
                </p>
              </li>
            </ul>
          </section>
        </div>
      </div>

      <PostListing title="Recent posts" posts={posts.slice(0, 5)} />

      <PostListing
        title="Highlights"
        posts={posts.filter((post) => post.tags.includes("highlight"))}
      />
    </MainTemplate>
  )
}

export { HomePage }