import MainTemplate from "@/templates/MainTemplate"
import PostListing from "@/containers/PostListing"
import { usePosts } from "@/hooks/usePosts"
import roundedPortrait from "../images/round-portrait.png"

const HomePage = () => {
  const { posts } = usePosts()
  return (
    <MainTemplate>
      <div className="mb-7 border border-foreground py-6 px-6 md:px-8 md:pt-9 dark:bg-sidebar">
        <div className="flex flex-col items-center md:flex-row md:items-start gap-4 md:gap-8 md:flex-row-reverse">
          <div className="flex-shrink-0">
            <img
              src={roundedPortrait}
              alt="Profile picture"
              className="rounded-image w-36 h-36 md:w-38 md:h-38 object-contain border-2 rounded-full"
            />
          </div>

          <div className="text-center md:text-left flex-1">
            <h1 className="scroll-m-20 text-2xl font-semibold">
              Another software engineer with a blog
            </h1>
            <p className="leading-[1.7] mt-5">
              I'm a self-taught software engineer from London. This blog is a
              technical scrapbook and digital garden.
            </p>
          </div>
        </div>
      </div>

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

export { HomePage }