---
import { getCollection } from 'astro:content'
import BaseLayout from '@/layouts/BaseLayout.astro'

export async function getStaticPaths() {
  const posts = await getCollection('blog')
  return posts.map((p) => ({ params: { slug: p.slug }, props: { post: p } }))
}
const { post } = Astro.props
const { Content } = await post.render()
const fmt = post.data.date.toLocaleDateString('ru-KZ', { day: '2-digit', month: 'long', year: 'numeric' })
---
<BaseLayout title={post.data.title} description={post.data.description}>
  {post.data.cover_image && (
    <div class="w-full overflow-hidden bg-slate-100" style="max-height: 480px;">
      <img src={post.data.cover_image} alt="" class="w-full h-full object-cover" loading="eager" />
    </div>
  )}
  <article class="max-w-[720px] mx-auto px-4 sm:px-6 py-12">
    <a href="/blog" class="text-xs text-brand hover:underline">← Все посты</a>
    <p class="text-xs text-slate-500 mt-4">{fmt}</p>
    <h1 class="text-4xl font-extrabold mt-2">{post.data.title}</h1>
    <p class="text-lg text-slate-600 mt-3">{post.data.description}</p>
    <div class="prose-md mt-8"><Content /></div>
  </article>
</BaseLayout>
<style is:global>
  .prose-md { font-size: 16px; line-height: 1.75; color: #1e293b; }
  .prose-md h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2rem; margin-bottom: 0.75rem; }
  .prose-md h3 { font-size: 1.125rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; }
  .prose-md p { margin: 1rem 0; }
  .prose-md ul, .prose-md ol { margin: 1rem 0 1rem 1.5rem; }
  .prose-md li { margin: 0.35rem 0; }
  .prose-md a { color: #00B207; text-decoration: underline; }
  .prose-md blockquote { border-left: 3px solid #00B207; background: #E8F5E9; padding: 0.75rem 1rem; margin: 1.25rem 0; font-style: italic; color: #1e293b; }
  .prose-md code { background: #f1f5f9; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875em; }
  .prose-md hr { margin: 2rem 0; border: 0; border-top: 1px solid #e2e8f0; }
  .prose-md strong { font-weight: 600; }
  .prose-md table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.95rem; }
  .prose-md th, .prose-md td { border: 1px solid #e2e8f0; padding: 0.5rem 0.75rem; text-align: left; }
  .prose-md th { background: #f8fafc; font-weight: 600; }
</style>
