import type { ClientView } from '@/lib/client-view';
import { Card } from '@/components/ui/card';

interface NotesSectionProps {
  notes: ClientView['notes'];
}

export function NotesSection({ notes }: NotesSectionProps) {
  if (notes.length === 0) {
    return (
      <p className="text-sm text-[#999999] italic">
        Nessuna nota ancora registrata. Le decisioni appariranno qui man mano che il progetto avanza.
      </p>
    );
  }

  return (
    <div className="space-y-3">
      {notes.map((note) => {
        const dateFormatted = new Date(note.created_at).toLocaleDateString('it-IT', {
          year: 'numeric',
          month: 'long',
          day: 'numeric',
        });
        const timeFormatted = new Date(note.created_at).toLocaleTimeString('it-IT', {
          hour: '2-digit',
          minute: '2-digit',
        });

        return (
          <Card
            key={note.id}
            className="rounded-lg border border-[#e5e5e5] bg-white shadow-none p-5"
          >
            {/* Testo nota — sola lettura (D-12: admin scrive, cliente legge) */}
            <p className="text-sm text-[#1a1a1a] leading-relaxed whitespace-pre-wrap">
              {note.body}
            </p>

            {/* Timestamp */}
            <p className="text-xs text-[#999999] mt-3">
              {dateFormatted} alle {timeFormatted}
            </p>
          </Card>
        );
      })}
    </div>
  );
}