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 { Link } from "react-router"

const HomePage = () => {
  const { posts } = usePosts()
  return (
    <MainTemplate>
      <p>
        A wizard who goes to bed early. This is <Link to="/about">my</Link>{" "}
        technical scrapbook and digital garden.
      </p>

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

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

export { HomePage }