---
import { IconClock, IconStar, IconArrowRight } from '@tabler/icons-react';
import { fetchAllPosts } from '../utils/data/posts.js';
import { md } from '@utils/helpers.js';

const posts = await fetchAllPosts();
---

<h2>
  <IconClock size={24} />
  Recent posts
</h2>
{posts.slice(0, 5).map(post => (
  <article key={post.url}>
    <div class="post-meta">
      {post.featured && <IconStar size={16} />}
      <time datetime={post.date}>
        {new Date(post.date).toLocaleDateString('en-US', {
          year: 'numeric',
          month: 'long',
          day: 'numeric',
        })}
      </time>
    </div>
    <h3>
      <a href={post.url}>{post.title}</a>
    </h3>
    <p set:html={md(post.description)}></p>
  </article>
))}
<a class="icon-link" href="/posts">
  View all posts <IconArrowRight size={16} />
</a>