---
import type { CollectionEntry } from 'astro:content';
import { render } from 'astro:content';
import { Picture } from 'astro:assets';
import Base from '../layouts/Base.astro';
import { formatDate, localePath, t, type Lang } from '../i18n/ui';

interface Props { lang: Lang; post: CollectionEntry<'insights'> }
const { lang, post } = Astro.props;
const ui = t(lang);
const { Content } = await render(post);
const d = post.data;
---
<Base lang={lang} title={d.title} description={d.description}>
  <article class="post" lang={d.lang}>
    <header class="section section--intro post__head">
      <div class="container grid">
        <div class="post__meta-col">
          <a class="link" href={localePath(lang, '/insights')} lang={lang}>{ui.insights.back}</a>
        </div>
        <div class="post__title-col">
          <p class="small muted post__meta">
            <span>{d.category}</span>
            <time datetime={d.date.toISOString().slice(0, 10)}>{formatDate(d.date, lang)}</time>
            <span lang={lang}>{ui.insights.readingTime(d.readingTime)}</span>
          </p>
          <h1 class="h2 post__title">{d.title}</h1>
          {d.subtitle && <p class="post__subtitle muted">{d.subtitle}</p>}
          <p class="post__author"><span lang={lang}>{ui.insights.by}</span> <span class="post__author-name">{d.author}</span><span class="muted">, {d.authorRole}</span></p>
        </div>
      </div>
    </header>

    {d.cover && <div class="container">
      <Picture
        src={d.cover}
        alt={d.coverAlt!}
        formats={['avif']}
      fallbackFormat="webp"
        widths={[640, 960, 1440, 1920]}
        sizes="(min-width: 90rem) 1440px, 100vw"
        loading="eager"
        decoding="async"
        class="post__cover img-doc"
      />
    </div>}

    <div class="section container grid">
      <div class="prose post__body">
        <Content />
      </div>
    </div>
  </article>
</Base>

<style>
  .post__meta-col { grid-column: 1 / -1; }
  .post__title-col { grid-column: 1 / -1; display: grid; gap: var(--space-5); }
  .post__meta { display: flex; flex-wrap: wrap; gap: var(--space-4); }
  .post__title { text-wrap: balance; }
  .post__subtitle { font-size: var(--step-h3); letter-spacing: var(--track-h3); line-height: var(--leading-h3); max-width: var(--measure); }
  .post__author-name { font-weight: var(--weight-medium); }
  .post__cover, :global(.post__cover) { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 12%; }
  .post__body { grid-column: 1 / -1; }
  @media (min-width: 48rem) {
    .post__meta-col { grid-column: 1 / span 2; }
    .post__title-col { grid-column: 3 / span 9; }
    .post__body { grid-column: 3 / span 8; }
  }
  @media (min-width: 64rem) {
    .post__title-col { grid-column: 3 / span 8; }
    .post__body { grid-column: 3 / span 7; }
  }
</style>