---
import { getCollection } from 'astro:content';

import BaseLayout from '@/layouts/BaseLayout.astro';
import ArticleCard from '@/components/ArticleCard.astro';
import Header from '@/components/Header.astro';
import LatestArticle from '@/components/LatestArticle.astro';

const allPosts = await getCollection('blog');
const posts = allPosts.sort(
  (a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime()
);

const [latest, ...articles] = posts;
---

<BaseLayout>
  <Header />

  {
    latest && (
      <LatestArticle
        id={latest.id}
        title={latest.data.title}
        description={latest.data.description}
      />
    )
  }

  {
    articles.length > 0 && (
      <section class="feed">
        <h2>Más artículos</h2>
        <ul>
          {articles.map(({ id, data }) => (
            <li>
              <ArticleCard
                id={id}
                title={data.title}
                description={data.description}
                pubDate={data.pubDate}
              />
            </li>
          ))}
          <li class="feed-cap" />
        </ul>
      </section>
    )
  }
</BaseLayout>

<style>
  .feed h2 {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.075rem;
    margin-bottom: 1.125rem;
    text-transform: uppercase;
  }

  .feed ul {
    list-style: none;
  }

  .feed li {
    border-top: 1px solid var(--border);
  }

  .feed-cap {
    padding: 0;
  }
</style>