---
import Icon from '@components/icons/icon.astro'
import type { CollectionEntry } from 'astro:content'
import { Image } from 'astro:assets'

const { blog } = Astro.props

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

<a
    class="group outline-none rounded-xl ring-zinc-500 transition duration-300 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
    href={`/posts/${blog.slug}/`}
>
    <div class="aspect-w-16 aspect-h-10 relative overflow-hidden rounded-xl ">
        <Image
            class="h-full sm:h-[220px] md:h-[240px] w-full object-cover rounded-xl transition duration-500 ease-in-out group-hover:scale-105"
            src={blog.data.cardImage}
            alt={blog.data.title}
            format="avif"
            loading="lazy"
        />
    </div>

    <div class="mt-7">
        <h3
            class="text-xl font-bold text-neutral-800 group-hover:text-neutral-600 dark:text-neutral-200 dark:group-hover:text-neutral-400"
        >
            {blog.data.title}
         </h3>

        <p class="mt-3 text-neutral-600 dark:text-neutral-400">
          {blog.data.description}
        </p>

        <p
            class="mt-5 inline-flex items-center gap-x-1 font-medium text-orange-400 decoration-2 group-hover:underline dark:text-orange-300"
        >
            Подробнее <Icon name="arrowRightStatic" />
        </p>
    </div>
</a>
