---
import BlogCard from '@/components/BlogCard.astro'
import Container from '@/components/Container.astro'
import Link from '@/components/Link.astro'
import { buttonVariants } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
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">Hey, I'm Michael Kinder. 👋</CardTitle
          >
        </CardHeader>
        <CardContent>
          <p class="mb-2 text-sm text-muted-foreground">
            I'm a gay geek fueled by coffee and a passion for all things tech,
            with a healthy dose of rural charm.
          </p>
          <p class="mb-2 text-sm text-muted-foreground">
            This is my digital playground where I whip up code concoctions,
            document my caffeine-fueled brainstorms, and showcase projects that
            might just change the world (or not).
          </p>
          <p class="text-sm text-muted-foreground">
            If you dig a little geeky fun with a side of country realness, pull
            up a chair and stay awhile.
          </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>