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

type Props = {
  posts: Post[];
};

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

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

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

  <section class="post-list" aria-label="Posts">
    {posts.length === 0 ? (
      <p class="empty">No published posts yet.</p>
    ) : (
      posts.map((post) => (
        <article class="post-item">
          <a href={post.url}>
            <h2>{post.title}</h2>
            {post.summary && <p>{post.summary}</p>}
            <div class="post-meta">
              {post.date && (
                <time datetime={post.date}>
                  {new Date(post.date).toLocaleDateString(site.language)}
                </time>
              )}
              {post.tags.length > 0 && (
                <ul class="tags" aria-label="Tags">
                  {post.tags.map((tag) => (
                    <li>
                      <a href={`/tags/${tagSlug(tag)}/`}>{tag}</a>
                    </li>
                  ))}
                </ul>
              )}
            </div>
          </a>
        </article>
      ))
    )}
  </section>
</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),
  .post-item 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;
  }

  .post-list {
    display: grid;
    gap: 16px;
  }

  .post-item {
    border-bottom: 1px solid #ded8cd;
    padding: 18px 0 22px;
  }

  .post-item a {
    display: block;
  }

  .post-item h2 {
    margin: 0 0 8px;
    font-size: 1.45rem;
  }

  .post-item p,
  .empty {
    color: #5b554d;
  }

  .post-item p {
    margin: 0 0 12px;
    line-height: 1.7;
  }

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

  .post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    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;
  }
</style>
