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>

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

export { HomePage }