---
import { Image } from 'astro:assets';

type Props = { post: any; };

const { post }: Props = Astro.props;
---

<div class="col-sm-6 col-lg-4 mb-3 mb-sm-8 blog-card">
  <article class="card h-100">
    <figure class="shape-container">
      <Image
        class="card-img img-fluid"
        src={`${import.meta.env.ASTRO_DIRECTUS_API}/assets/${post.cover_image}`}
        alt="Image placeholder"
        inferSize={true}
      />
      <div class="shape shape-bottom zi-1" style="margin-bottom: -0.25rem">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          x="0px"
          y="0px"
          viewBox="0 0 1920 100.1"
        >
          <path fill="#fff" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"></path>
        </svg>
      </div>
    </figure>

    <div class="card-body p-4">
      <h3 class="card-title">
        <a class="text-dark" href={`./${post.slug}/ `}>{post.title}</a>
      </h3>

      <p class="card-text">
        {post.description}
      </p>
    </div>

    <div class="card-footer p-4 pt-0">
      <div class="d-flex justify-content-end">
        <p class="card-text">{new Date(post.date_created).toDateString()}</p>
      </div>
    </div>
  </article>
</div>
