---
import { buttonVariants } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import BlogCard from '@components/BlogCard.astro'
import Container from '@components/Container.astro'
import Link from '@components/Link.astro'
import { SITE } from '@consts'
import Layout from '@layouts/Layout.astro'
import { getCollection } from 'astro:content'

const blog = (await getCollection('blog'))
  .filter((post) => !post.data.draft)
  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
  .slice(0, SITE.NUM_POSTS_ON_HOMEPAGE)
---

<Layout title="Home" description={SITE.DESCRIPTION}>
  <Container class="flex flex-col gap-y-6">
    <section>
      <Card>
        <CardHeader>
          <CardTitle className="text-3xl">er·u·dite</CardTitle>
          <CardDescription
            >/ˈer(y)əˌdīt/ &bull; <span class="font-semibold">adjective</span
            ></CardDescription
          >
        </CardHeader>
        <CardContent>
          <p class="text-sm">
            astro-erudite is an opinionated, no-frills static blogging template
            built with <Link href="https://astro.build" external underline
              >Astro</Link
            >. To learn more about why this template exists, read <Link
              href="/blog/the-state-of-static-blogs"
              underline>The State of Static Blogs in 2024</Link
            >.
          </p>
        </CardContent>
      </Card>
    </section>
    <section class="flex flex-col gap-y-4">
      <h2 class="text-2xl font-bold">Latest posts</h2>
      <ul class="not-prose flex flex-col gap-y-4">
        {
          blog.map((post) => (
            <li>
              <BlogCard entry={post} />
            </li>
          ))
        }
      </ul>
      <div class="flex justify-center">
        <Link
          href="/blog"
          class={buttonVariants({ variant: 'ghost' }) + ' group'}
        >
          See all posts <span
            class="ml-1.5 transition-transform group-hover:translate-x-1"
            >&rarr;</span
          >
        </Link>
      </div>
    </section>
  </Container>
</Layout>