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

type Props = {
  post: any;
};

const { post } = Astro.props;
const { Content } = post;
const title = post.frontmatter.title;
const date = post.frontmatter.created_at ?? post.frontmatter.published_at ?? post.frontmatter.updated_at;
---

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

  <article class="article">
    <header>
      <h1>{title}</h1>
      {date && (
        <time datetime={date}>
          {new Date(date).toLocaleDateString(site.language)}
        </time>
      )}
      {post.frontmatter.summary && <p class="summary">{post.frontmatter.summary}</p>}
      {post.frontmatter.tags?.length > 0 && (
        <ul class="tags article-tags" aria-label="Tags">
          {post.frontmatter.tags.map((tag) => (
            <li>
              <a href={`/tags/${tagSlug(tag)}/`}>{tag}</a>
            </li>
          ))}
        </ul>
      )}
    </header>

    <Content />
  </article>
</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),
  .tags a {
    color: inherit;
    text-decoration: none;
  }

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

  .article {
    line-height: 1.8;
  }

  .article header {
    border-bottom: 1px solid #d8d1c3;
    margin-bottom: 32px;
    padding-bottom: 24px;
  }

  .article h1 {
    margin: 0 0 16px;
    font-size: clamp(2.1rem, 7vw, 4rem);
  }

  .summary {
    color: #5b554d;
  }

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

  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    margin: 16px 0 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;
  }

  .article :global(pre) {
    overflow-x: auto;
    border-radius: 8px;
    padding: 16px;
    background: #272822;
    color: #f8f8f2;
  }

  .article :global(code) {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  }
</style>