import Header from '@/components/Header';
import Footer from '@/components/Footer';
import NotesBlock from '@/components/NotesBlock';
import { listNotes } from '@/lib/engine';
import { MessageCircle } from 'lucide-react';

export const dynamic = 'force-dynamic';
export const metadata = { title: 'Заметки редактора' };

export default async function NotesPage() {
  const notes = await listNotes({ limit: 100 });
  return (
    <>
      <Header />
      <main className="pt-10 pb-16">
        <div className="container-wide mb-8">
          <div
            className="inline-flex items-center gap-2 text-xs accent px-3 py-1.5 rounded-full mb-4"
            style={{ background: 'rgb(var(--accent) / 0.1)', border: '1px solid rgb(var(--accent) / 0.2)' }}
          >
            <MessageCircle className="w-3.5 h-3.5" /> За кулисами
          </div>
          <h1 className="text-3xl sm:text-5xl font-bold ink mb-3 leading-tight">
            Заметки редактора
          </h1>
          <p className="mute text-base sm:text-lg max-w-2xl">
            Короткие мысли, наблюдения, технические заметки и комментарии человека, который следит за блогом. Не статьи — просто записи на полях.
          </p>
        </div>
        <NotesBlock notes={notes} />
      </main>
      <Footer />
    </>
  );
}