---
import type { CollectionEntry } from 'astro:content';
import EntryThumbnail from './EntryThumbnail.astro';
import TagList from './TagList.astro';
import { articlePath, formatDate, formatDateShort } from '../lib/site';

interface Props {
  posts: CollectionEntry<'posts'>[];
  showYear?: boolean;
  currentTag?: string;
}

const { posts, showYear = true, currentTag } = Astro.props;
---

<ol class="article-list">
  {
    posts.map((post) => {
      const href = articlePath(post);
      return (
        <li>
          <time datetime={post.data.date.toISOString()}>
            {showYear ? formatDate(post.data.date) : formatDateShort(post.data.date)}
          </time>
          <article>
            <a class="entry-title" href={href}>
              {post.data.title}
            </a>
            <p>{post.data.description}</p>
            <TagList tags={post.data.tags} currentTag={currentTag} limit={3} />
          </article>
          <EntryThumbnail
            src={post.data.thumbnail.src}
            alt={post.data.thumbnail.alt}
            href={href}
            class="article-thumbnail"
            widths={[120, 180, 240, 320, 480]}
            sizes="(max-width: 700px) clamp(64px, 22vw, 80px), (max-width: 960px) 7rem, 8rem"
          />
        </li>
      );
    })
  }
</ol>