import Link from 'next/link';
import { Pin, ArrowRight, MessageCircle } from 'lucide-react';
import { formatDate } from '@/lib/markdown';

function NoteCard({ note }) {
  return (
    <article className="article-card p-5 sm:p-6 h-full flex flex-col">
      {note.is_pinned && (
        <div className="flex items-center gap-1.5 text-xs accent mb-2">
          <Pin className="w-3 h-3" /> закреплено
        </div>
      )}
      {note.title && (
        <h3 className="text-base sm:text-lg font-semibold ink mb-2 leading-snug">
          {note.title}
        </h3>
      )}
      <p className="mute text-sm leading-relaxed mb-4 flex-1 whitespace-pre-line line-clamp-6">
        {note.content}
      </p>
      <div className="flex items-center justify-between text-xs mute pt-3 border-t-soft">
        <span>{note.author}</span>
        <span>{formatDate(note.created_at)}</span>
      </div>
    </article>
  );
}

export default function NotesBlock({ notes, compact = false }) {
  if (!notes || notes.length === 0) return null;
  const items = compact ? notes.slice(0, 3) : notes;

  return (
    <section className="container-wide pb-12">
      <div className="flex items-center justify-between mb-4 sm:mb-5">
        <div className="flex items-center gap-2">
          <MessageCircle className="w-4 h-4 mute" />
          <h2 className="text-xs sm:text-sm font-medium uppercase tracking-widest mute">
            Заметки редактора
          </h2>
        </div>
        {compact && notes.length > 3 && (
          <Link href="/notes" className="text-xs mute hover:ink transition-colors inline-flex items-center gap-1">
            Все <ArrowRight className="w-3 h-3" />
          </Link>
        )}
      </div>
      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5">
        {items.map(n => <NoteCard key={n.id} note={n} />)}
      </div>
    </section>
  );
}