// @ts-nocheck
import { useParams } from "react-router"
import MainTemplate from "./MainTemplate"
import PostListing from "@/containers/PostListing"
import { usePosts } from "@/hooks/usePosts"

const TagTemplate = () => {
	const { tag } = useParams()
	const { posts } = usePosts()

	const filteredPosts = posts.filter((post) => post.tags.includes(tag))

	return (
		<MainTemplate>
			<div className="container mx-auto p-4">
				<h1 className="h1 text-3xl text-[#b8bb26]!">{`Posts tagged: #${tag}`}</h1>
			</div>
			<PostListing title={null} posts={filteredPosts} />
		</MainTemplate>
	)
}

export default TagTemplate
