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

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

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

interface Props {
  post: Post;
}

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

<div class="smooth-reveal flex flex-col px-4 py-10 mx-auto w-full">
  <a
    class="md:card-base-hidden group md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 gap-8 xl:gap-16 w-full md:px-8 md:py-8"
    href={`/blog/${post.slug}`}
    data-astro-prefetch
  >
    <div class="h-full">
      <Image
        class="rounded-2xl rounded-b-none md:rounded-2xl md:shadow-2xl w-full h-full object-cover"
        src={getDirectusImageURL(post.image)}
        alt={post.image_alt}
        draggable="false"
        loading="lazy"
        inferSize={true}
      />
    </div>
    <div class="flex flex-col justify-center bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6 gap-4">
      <h2 class="card-text-header">
        {post.title}
      </h2>
      <p class="card-text-title font-light text-pretty sm:text-lg max-w-prose">
        {post.description}
      </p>
      <div class="flex md:flex-col-reverse lg:flex-row items-center md:items-start lg:items-center justify-between w-full md:gap-4">
        <div class="hidden md:block shrink-0 mt-4">
          <ReadMoreButton/>
        </div>
        <div class="mt-2 lg:mt-4">
          <PostMetadataSnippet
            post={post}
            enableCategoryLink={false}
          />
        </div>
      </div>
    </div>
  </a>
</div>