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>
			<p>A wizard who goes to bed early. This is my 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"))}
			/>


			{/* <CodeStats />
			<EolasListing /> */}
		</MainTemplate>
	)
}

export { HomePage }