import MainTemplate from "@/templates/MainTemplate"
import PostListing from "@/containers/PostListing"
import { usePosts } from "@/hooks/usePosts"
import roundedPortrait from "../images/round-portrait.png"
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>
			<div className="mb-7 border border-foreground py-6 px-6 md:py-8 md:px-8 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">
					{/* Image - centers on mobile, left-aligned on desktop */}
					<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"
						/>
					</div>

					{/* Text content */}
					<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 currently working at ITV,
							previously at the BBC. 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 }