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

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

<div id="blogMain" class="">
  <article class="card card-stretched-vertical mb-3 mb-sm-10">
    <div class="row gx-0">
      <div class="col-lg-8">
        <figure class="shape-container overflow-hidden" style="height: 100%">
          <Image
            class="card-img"
            src={`${import.meta.env.ASTRO_DIRECTUS_API}/assets/${post.cover_image}`}
            alt="Image placeholder"
            style="height: 100%"
            inferSize={true}
          />
          <div class="shape shape-end d-none d-lg-block z-2">
            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100.1 1920" height="100%">
              <path fill="#fff" d="M0,1920c0,0,93.4-934.4,0-1920h100.1v1920H0z"></path>
            </svg>
          </div>
          <div class="shape shape-bottom d-lg-none 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>
      <div class="col-lg-4">
        <div class="card-body">
          <h3 class="h2 card-title">
            <a class="text-dark" href={`./${post.slug}/`}
              >{post.title}
            </a>
          </h3>
          <p class="card-text">
            {post.description}
          </p>
          <div class="card-footer">
            <div class="d-flex justify-content-end">
              <p class="card-text">{new Date(post.date_created).toDateString()}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </article>
</div>
