---
import SiteNav from './SiteNav.astro';
import { site } from '../lib/siteConfig';
import { tagSlug, type ArchiveYear } from '../lib/posts';

type Props = {
  archiveYears: ArchiveYear[];
};

const { archiveYears } = Astro.props;
---

<main class="page">
  <SiteNav />

  <header class="site-header">
    <p class="eyebrow">{site.title}</p>
    <h1>Archive</h1>
  </header>

  {archiveYears.length === 0 ? (
    <p class="empty">No published posts yet.</p>
  ) : (
    <div class="archive-list">
      {archiveYears.map((group) => (
        <section class="archive-year" aria-label={group.year}>
          <h2>{group.year}</h2>
          <ol>
            {group.posts.map((post) => (
              <li>
                {post.date && (
                  <time datetime={post.date}>
                    {new Date(post.date).toLocaleDateString(site.language, {
                      month: '2-digit',
                      day: '2-digit'
                    })}
                  </time>
                )}
                <a href={post.url}>{post.title}</a>
                {post.tags.length > 0 && (
                  <ul class="tags compact-tags" aria-label="Tags">
                    {post.tags.map((tag) => (
                      <li>
                        <a href={`/tags/${tagSlug(tag)}/`}>{tag}</a>
                      </li>
                    ))}
                  </ul>
                )}
              </li>
            ))}
          </ol>
        </section>
      ))}
    </div>
  )}
</main>

<style>
  .page {
    width: min(860px, calc(100% - 32px));
    margin: 0 auto;
    padding: 56px 0 80px;
    color: #20201d;
    font-family:
      Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      sans-serif;
  }

  .page :global(.site-nav) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: 36px;
    color: #625a50;
    font-size: 0.95rem;
  }

  .page :global(.site-nav a),
  .archive-year li > a,
  .tags a {
    color: inherit;
    text-decoration: none;
  }

  .page :global(.site-nav a:hover) {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .site-header {
    border-bottom: 1px solid #d8d1c3;
    padding-bottom: 28px;
    margin-bottom: 28px;
  }

  .eyebrow {
    margin: 0 0 8px;
    color: #6f675b;
    font-size: 0.875rem;
    text-transform: uppercase;
  }

  h1 {
    margin: 0;
    font-size: clamp(2.4rem, 8vw, 5rem);
    line-height: 1;
  }

  .archive-list {
    display: grid;
    gap: 32px;
  }

  .archive-year h2 {
    margin: 0 0 12px;
    font-size: 1.4rem;
  }

  .archive-year ol {
    display: grid;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .archive-year li {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid #ded8cd;
    padding: 10px 0;
  }

  time {
    color: #7a7268;
    font-size: 0.9rem;
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .tags li {
    border: 1px solid #d0c8bb;
    border-radius: 999px;
    color: #5f584d;
    font-size: 0.82rem;
  }

  .tags a {
    display: inline-block;
    padding: 2px 8px;
  }

  .empty {
    color: #5b554d;
  }

  @media (max-width: 640px) {
    .archive-year li {
      grid-template-columns: 1fr;
      gap: 6px;
    }

    .tags {
      justify-content: flex-start;
    }
  }
</style>
