---
import { Icon } from 'astro-icon/components';

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

import Image from '@components/ui/images/Image.astro';
import { getDirectusImageURL } from '@lib/directusFunctions';

interface Props {
  post: Post;
}

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

<div class="smooth-reveal-cards group flex flex-col">
  <a
    class="card-base border-none!"
    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-auto w-full"
        src={getDirectusImageURL(post.image)}
        alt={post.image_alt}
        draggable="false"
        loading="eager"
        format="webp"
      />
    </div>
    <div class="rounded-xl p-4 md:p-5">
      <h3 class="card-text-title text-xl">
        {post.title}
      </h3>
      <div class="ml-6 flex">
        <div class="relative inline-block w-full">
          <div class="card-text-title card-hover-text-title flex relative items-center mx-auto min-h-11 sm:mx-0 sm:mt-4">
            <span class="relative inline-block overflow-hidden ml-2">
              Read more
            </span>
            <Icon
              name="mdi:keyboard-arrow-right"
              class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
            />
            <p class="card-text-description text-sm ml-auto">
              {new Date(post.published_date).toLocaleDateString('en-US', {
                year: 'numeric',
                month: 'short',
                day: 'numeric',
              })}
            </p>
          </div>
        </div>
      </div>
    </div>
  </a>
</div>