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

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

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

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

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

  <section class="post-list" aria-label={`Posts tagged ${tag.name}`}>
    {posts.map((post) => (
      <article class="post-item">
        <a href={post.url}>
          <h2>{post.title}</h2>
          {post.summary && <p>{post.summary}</p>}
          {post.date && (
            <time datetime={post.date}>
              {new Date(post.date).toLocaleDateString(site.language)}
            </time>
          )}
        </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 {
    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 {
    margin: 0 0 12px;
    color: #5b554d;
    line-height: 1.7;
  }

  time {
    color: #7a7268;
    font-size: 0.9rem;
  }
</style>
