import MainTemplate from "@/templates/MainTemplate"
import PostListing from "@/containers/PostListing"
import { usePosts } from "@/hooks/usePosts"
import gruvboxComputer from "../images/gruvbox-computer.svg"
import EolasListing from "@/components/EolasListing"
import CodeStats from "../containers/CodeStats"
// 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 text-center sm:text-left md:text-left">
                  <div className="scanlined inline-block py-1 px-2">
                    systems obscure
                  </div>
                </h1>
                <p className="text-center sm:text-left md:text-left text-muted condensed font-medium text-lg">
                  Software engineer at ITV. This is my technical scrapbook and
                  digital garden.
                </p>
              </div>
            </div>
          </section>
        </div>
      </div>

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

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

      <div className="container mx-auto p-4 grow">
        <div className="space-my-8">
          <section className="container">
            <h2 className="text-2xl font-semibold mb-4 text-[#d3869b]! scanlined block px-2 h2-home">
              {`> projects`}
            </h2>
            <ul>
              <li className="pb-2">
                <a
                  className="underline underline-offset-4 text-[18px] text-primary hover:text-primary/80 font-medium"
                  href="https://eolas.systemsobscure.net"
                  target="_blank"
                >
                  eolas
                </a>
              </li>
              <li>
                <p className="">
                  A public frontend for my local Zettelkasten created with
                  NodeJS, Python and React.
                </p>
              </li>
            </ul>
          </section>
        </div>
      </div>
      <CodeStats />
      <EolasListing />
    </MainTemplate>
  )
}

export { HomePage }