import MainTemplate from "@/templates/MainTemplate"
import PostListing from "@/containers/PostListing"
import { usePosts } from "@/hooks/usePosts"
import { Card, CardHeader, CardContent, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Link } from "react-router"

const HomePage = () => {
	const { posts } = usePosts()
	return (
		<MainTemplate>
			<Card className="mb-8">
				<CardHeader>
					<h1 className="scroll-m-20 text-left text-3xl font-bold  text-balance">
						Another software engineer with a blog 🥱
					</h1>
				</CardHeader>
				<CardContent>
					<p className="leading-[1.5] [&:not(:first-child)]:mt-6">
						I'm a self-taught software engineer currently working at ITV,
						previously at the BBC. This blog is a technical scrapbook and
						digital garden.
					</p>
				</CardContent>
				<CardFooter>
					<Button asChild>
						<Link to="/about">About</Link>
					</Button>
				</CardFooter>
			</Card>

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

export { HomePage }