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-semibold">
            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 }
