---
import type { CollectionEntry } from "astro:content";

export interface Props {
  blog : CollectionEntry<'blog'>
}

const { blog } = Astro.props;
---

<a href={`/blog/${blog.slug}`}>
  <article 
    class="flex flex-row justify-between items-center w-full h-fit px-8 py-4 border-2 text-white rounded-md">
    <div class="flex flex-col gap-2 !!no-underline ">
      <h1 class="text-3xl font-bold">{blog.data.title}</h1> 
      <p class="text-lg italic">{blog.data.description}</p>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M13.22 19.03a.75.75 0 0 1 0-1.06L18.19 13H3.75a.75.75 0 0 1 0-1.5h14.44l-4.97-4.97a.749.749 0 0 1 .326-1.275a.749.749 0 0 1 .734.215l6.25 6.25a.75.75 0 0 1 0 1.06l-6.25 6.25a.75.75 0 0 1-1.06 0Z"/></svg>
  </article>
</a>