import Link from 'next/link';
import { ArrowRight } from 'lucide-react';
import Header from '../../components/Header.jsx';
import Footer from '../../components/Footer.jsx';
import SectionHeading from '../../components/SectionHeading.jsx';
import Reveal from '../../components/Reveal.jsx';
import { serverApi } from '../../lib/serverApi.js';

export const metadata = {
  title: 'Блог',
  description: 'Заметки об IT-инфраструктуре, кибербезопасности и автоматизации от TopSysOps.',
};

function formatDate(iso) {
  if (!iso) return '';
  return new Date(iso).toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' });
}

export default async function BlogListPage() {
  const posts = await serverApi.getBlogPosts();

  return (
    <div>
      <Header />
      <section className="max-w-3xl mx-auto px-5 sm:px-8 py-20 min-h-[60vh]">
        <SectionHeading eyebrow="blog --articles" title="Блог" desc="Заметки об IT-инфраструктуре, кибербезопасности и автоматизации." />

        {posts.length === 0 && <p className="text-sm text-slate-400">Пока нет опубликованных статей - загляните позже.</p>}

        <div className="space-y-4">
          {posts.map((p, i) => (
            <Reveal key={p.id} delay={i * 60}>
              <Link
                href={`/blog/${p.slug}`}
                className="block rounded-lg border p-5 transition-colors hover:border-emerald-500 bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800"
              >
                <p className="text-xs text-slate-400 dark:text-slate-500 mb-1 font-mono">{formatDate(p.published_at)}</p>
                <h2 className="font-bold mb-2 font-display text-lg">{p.title}</h2>
                {p.excerpt && <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">{p.excerpt}</p>}
                <span className="text-sm text-emerald-500 font-medium inline-flex items-center gap-1">
                  Читать <ArrowRight className="h-3.5 w-3.5" />
                </span>
              </Link>
            </Reveal>
          ))}
        </div>
      </section>
      <Footer />
    </div>
  );
}