---
import type { CollectionEntry } from 'astro:content'

type Props = {
  entry: CollectionEntry<'blog'>
}

const { entry } = Astro.props as {
  entry: CollectionEntry<'blog'>
}
---

<a
  href={`/${entry.collection}/${entry.slug}`}
  class="not-prose group relative flex flex-nowrap rounded-lg border px-4 py-3 pr-10 transition-colors duration-300 ease-in-out"
>
  <div class="flex flex-1 flex-col truncate">
    <div class="font-semibold">
      {entry.data.title}
    </div>
    <div class="text-sm">
      {entry.data.description}
    </div>
  </div>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    class="absolute right-2 top-1/2 size-5 -translate-y-1/2 fill-none stroke-current stroke-2"
  >
    <line
      x1="5"
      y1="12"
      x2="19"
      y2="12"
      class="translate-x-3 scale-x-0 transition-transform duration-300 ease-in-out group-focus-visible:translate-x-0 group-focus-visible:scale-x-100"
    ></line>
    <polyline
      points="12 5 19 12 12 19"
      class="-translate-x-1 transition-transform duration-300 ease-in-out group-focus-visible:translate-x-0"
    ></polyline>
  </svg>
</a>
