---
import Picture from "~/components/core/Picture.astro";
import { getPermalink } from "~/utils/permalinks";
import { findImage } from "~/utils/findImage";
import { getFormattedDate } from "~/utils/getFormatedDate";

const { post } = Astro.props;

const image = await findImage(post.image);
---

<article class="max-w-md mx-auto md:max-w-none grid md:grid-cols-2 gap-6 md:gap-8">
  <a class="relative block group" href="#0">
    <div
      class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg">
      <Picture src={image} class="absolute inset-0 w-full h-full object-cover mb-6 rounded shadow-lg" widths={[400,
        768]} sizes="(max-width: 767px) 400px, 768px" alt={post.description} aspectRatio={1} />
    </div>
  </a>
  <div>
    <header>
      <h2 class="text-xl sm:text-2xl font-bold leading-snug mb-2">
        <a class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
          href={getPermalink(post.slug, "post")}>
          {post.title}
        </a>
      </h2>
    </header>
    <p class="text-md sm:text-lg flex-grow">
      {post.excerpt || post.description}
    </p>
    <footer class="flex items-center mt-4">
      <div>
        <span class="text-gray-500 dark:text-slate-400">
          <time datetime={post.pubDate}>{getFormattedDate(post.pubDate)}</time> ~ {Math.ceil(post.readingTime)} min read
        </span>
      </div>
    </footer>
  </div>
</article>