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

type Props = {
  tags: TagSummary[];
};

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

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

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

  {tags.length === 0 ? (
    <p class="empty">No tags yet.</p>
  ) : (
    <ul class="tag-index" aria-label="Tags">
      {tags.map((tag) => (
        <li>
          <a href={`/tags/${tag.slug}/`}>
            <span>{tag.name}</span>
            <strong>{tag.count}</strong>
          </a>
        </li>
      ))}
    </ul>
  )}
</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),
  .tag-index 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;
  }

  .tag-index {
    display: grid;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .tag-index a {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #ded8cd;
    padding: 14px 0;
  }

  .tag-index strong {
    color: #766f65;
    font-weight: 500;
  }

  .empty {
    color: #5b554d;
  }
</style>
