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

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

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

interface Props {
  post: Post;
}

const { post } = Astro.props;

const baseClasses = 'group group-hover smooth-reveal-cards rounded-xl flex flex-col';
const borderClasses = 'border border-stone-200/50 dark:border-stone-700/50';
const bgColorClasses =
  'bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90';
const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg';
---

<div class={`${baseClasses}`}>
  <a
    class={`rounded-xl duration-300 transition-all ${borderClasses} ${shadowClasses} ${bgColorClasses}`}
    href={`/blog/${post.slug}/`}
    data-astro-prefetch
  >
    <div
      class="relative w-full flex-shrink-0 overflow-hidden rounded-t-xl before:absolute before:inset-x-0 before:z-[1] before:size-full"
    >
      <Image
        class="h-auto w-full rounded-t-xl"
        src={getDirectusImageURL(post.image)}
        alt={post.image_alt}
        draggable="false"
        loading="eager"
        format="webp"
        width="800"
        height="460"
      />
    </div>
    <div class="rounded-xl p-4 md:p-5">
      <h3 class="text-xl font-bold text-neutral-600 dark:text-neutral-200">
        {post.title}
      </h3>
      <div
        class="group-hover:text-steel dark:group-hover:text-bermuda transition-text relative z-10 mx-auto flex min-h-[44px] items-center font-medium text-neutral-600 decoration-2 duration-300 sm:mx-0 sm:mt-4 dark:text-neutral-400"
      >
        <span class="relative inline-block overflow-hidden"> Read more </span>
        <Icon
          name="mdi:keyboard-arrow-right"
          class="h-3 w-3 translate-y-0.25 transition duration-300 group-hover:translate-x-1 md:h-5 md:w-5"
        />
        <p class="ml-auto text-sm text-neutral-600 dark:text-neutral-400">
          {formatDate(post.published_date)}
        </p>
      </div>
    </div>
  </a>
</div>