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

import type { Post } from '@lib/directusTypes';

import PostMetadataSnippet from '@/components/snippets/PostMetadataSnippet.astro';
import { getDirectusImageURL } from '@/support/url';

interface Props {
  post: Post;
}

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

<div class="smooth-reveal-cards group flex flex-col">
  <a
    class="card-base border-none! h-full flex flex-col"
    href={`/blog/${post.slug}/`}
    data-astro-prefetch
  >
    <div class="relative shrink-0 rounded-t-xl w-full overflow-hidden before:absolute before:inset-x-0 before:z-1 before:size-full">
      <Image
        class="rounded-t-xl h-64 w-full object-cover"
        src={getDirectusImageURL(post.image)}
        alt={post.image_alt}
        draggable="false"
        loading="eager"
        format="webp"
        inferSize={true}
      />
    </div>
    <div class="flex flex-col flex-1 rounded-xl p-4 md:p-5 mx-1 mb-2">
      <div class="flex flex-row items-center mb-8">
        <h3 class="card-text-title card-hover-text-title text-2xl">
          {post.title}
        </h3>
      </div>
      <div class="mt-auto">
        <PostMetadataSnippet
          enableCategoryLink={false}
          post={post}
        />
      </div>
    </div>
  </a>
</div>