---
import type { CollectionEntry } from 'astro:content';
import { firstImage, plainText, formatDateRu } from '../lib/extract';
import { CATEGORY_COLORS } from '../consts';

interface Props {
  post: CollectionEntry<'posts'>;
  featured?: boolean;
}

const { post, featured = false } = Astro.props;
const { title, slug, pubDate, categories, categorySlugs, description, featuredImage } = post.data;
const html = post.body ?? '';
const thumb = featuredImage || firstImage(html);

// Фильтруем "Главная" — это псевдо-категория «попадает на главную страницу», а не тематика.
const tagPairs = categories
  .map((c, i) => ({ name: c, slug: categorySlugs[i] ?? c }))
  .filter((p) => p.slug !== 'main');

const accent = tagPairs[0] ? CATEGORY_COLORS[tagPairs[0].slug] ?? 'var(--accent)' : 'var(--accent)';
const excerpt = description || plainText(html, featured ? 480 : 260);
---

<article class={`post-card ${featured ? 'is-featured' : ''} ${thumb ? 'has-thumb' : 'no-thumb'}`}>
  {featured && (
    <div class="featured-badge">Главная история</div>
  )}
  {thumb && (
    <a class="thumb" href={`/${slug}/`} aria-hidden="true" tabindex="-1">
      <img src={thumb} alt="" loading="lazy" />
    </a>
  )}
  <div class="body">
    <h2 class="title">
      <a href={`/${slug}/`}>{title}</a>
    </h2>
    <div class="meta">
      <time class="date" datetime={pubDate.toISOString()} style={`--cat: ${accent}`}>
        <span class="date-mark">●</span>
        <span>{formatDateRu(pubDate)}</span>
      </time>
      {tagPairs.length > 0 && (
        <span class="cats">
          {tagPairs.map((p, i) => (
            <>
              {i > 0 && <span class="sep">·</span>}
              <a href={`/cat/${p.slug}/`}>{p.name}</a>
            </>
          ))}
        </span>
      )}
    </div>
    <p class="excerpt">{excerpt}</p>
    <a class="read-more" href={`/${slug}/`}>Читать далее →</a>
  </div>
</article>

<style>
  .post-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 1.25rem 0 1.5rem;
    border-bottom: 1px solid var(--rule);
  }
  .post-card:last-child { border-bottom: 0; }
  .post-card .thumb {
    display: block;
    margin-bottom: 1rem;
    line-height: 0;
  }
  .post-card .thumb img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--rule);
    padding: 4px;
    background: var(--paper);
  }
  @media (min-width: 640px) {
    .post-card.has-thumb:not(.is-featured) {
      grid-template-columns: 200px 1fr;
      gap: 1.25rem;
    }
    .post-card.has-thumb:not(.is-featured) .thumb { margin-bottom: 0; }
    .post-card.has-thumb:not(.is-featured) .thumb img { aspect-ratio: 4 / 3; object-fit: cover; width: 200px; }
  }
  .post-card.no-thumb:not(.is-featured) { grid-template-columns: 1fr; }

  /* Featured-карточка с рамкой и плашкой */
  .post-card.is-featured {
    position: relative;
    padding: 1.5rem;
    background: rgba(255, 252, 244, 0.55);
    border: 1px solid var(--rule-strong);
    border-bottom: 2px solid var(--rule-strong);
    margin-bottom: 1rem;
  }
  .is-featured .thumb img {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    aspect-ratio: 16 / 9;
  }
  .is-featured .title a { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
  .featured-badge {
    position: absolute;
    top: -10px;
    left: 1rem;
    background: var(--accent);
    color: var(--paper);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
  }

  .title {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
  }
  .title a { color: var(--ink); text-decoration: none; }
  .title a:hover { color: var(--accent); }

  .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0.35rem 0 0.8rem;
    font-size: 0.82rem;
    color: var(--muted);
  }
  .date {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-variant-numeric: tabular-nums;
  }
  .date-mark { color: var(--cat, var(--accent)); font-size: 0.7rem; }
  .cats { color: var(--muted); }
  .cats a {
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px dotted var(--rule-strong);
  }
  .cats a:hover { color: var(--accent); border-bottom-color: var(--accent); }
  .sep { color: var(--rule-strong); margin: 0 0.2rem; }

  .excerpt {
    font-family: var(--font-serif);
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--ink-soft);
    margin: 0 0 0.6rem;
  }
  .read-more {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    color: var(--accent);
    text-decoration: none;
  }
  .read-more:hover { color: var(--accent-soft); }
</style>
