---
import { truncateText } from '@llm/commons';
import { type Article, getImageUrl } from '~/directus';

interface Props {
  article: Article;
}

const {
  title,
  cover,
  description,
  author,
  published_date: publishDate,
  slug,
} = Astro.props.article;
---
<article class="w-full h-auto rounded flex flex-col">
  <a href={`/blog/${slug}`}>
    <img
      src={getImageUrl(cover)}
      alt={title}
      class="mb-4 w-full rounded-lg aspect-video object-cover"
      loading="lazy"
    />
  </a>

  <h3 class="mb-4 text-xl font-semibold flex-1">
    {title}
  </h3>

  <p class="mb-2 text-gray-600 text-sm">
    By {author.name} on {new Date(publishDate).toLocaleDateString()}
  </p>

  <p class="mb-4 text-gray-600">
    {truncateText(200)(description)}
  </p>

  <a href={`/blog/${slug}`} class="text-blue-500 hover:underline">
    Read more
  </a>
</article>
