---
import type { CollectionEntry } from 'astro:content'
import { Image } from 'astro:assets'
import { formatDate } from '../../support/time'

const { blog } = Astro.props

interface Props {
    blog: CollectionEntry<'posts'>
}
---

<a
    class="group relative block rounded-xl outline-none ring-zinc-500 transition duration-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
    href={`/posts/${blog.slug}/`}
    data-astro-prefetch
>
    <div class="relative w-full flex-shrink-0 overflow-hidden rounded-xl before:absolute before:inset-x-0 before:z-[1] before:size-full before:bg-gradient-to-t before:from-neutral-900/[.7]">
        <Image
            class="w-full h-full sm:h-[220px] md:h-[240px] start-0 top-0 size-full object-cover transition duration-500 group-hover:scale-110"
            src={blog.data.banner}
            alt={blog.data.title}
            draggable="false"
            loading="eager"
            format="avif"
        />
    </div>
    <h3 class="mt-2 text-xl font-bold text-neutral-800 group-hover:text-orange-400 dark:text-neutral-200 dark:group-hover:text-orange-300">
        {blog.data.title}
    </h3>
    <p class="mt-2 text-sm text-gray-600 dark:text-neutral-400 dark:group-hover:text-neutral-500">
        {formatDate(blog.data.pubDate)}
    </p>
</a>