import React from 'react';
import type { ResearchNote } from '../../../types/research';
import { InlineCitationChip } from './InlineCitationChip';

interface EvidenceDrawerProps {
  notes: ResearchNote[];
  onInsertCitation: (note: ResearchNote) => void;
}

export const EvidenceDrawer: React.FC<EvidenceDrawerProps> = ({
  notes,
  onInsertCitation,
}) => (
  <div className="space-y-3 rounded-2xl border border-term-border bg-term-surface p-4">
    <div>
      <h3 className="text-xs uppercase tracking-[0.2em] text-term-text-tertiary">Evidence Drawer</h3>
      <p className="mt-1 text-xs text-term-text-tertiary">Insert accepted or memo-eligible notes as citations.</p>
    </div>
    <div className="flex flex-wrap gap-2">
      {notes.slice(0, 12).map((note) => (
        <InlineCitationChip
          key={note.id}
          label={note.title || note.noteType}
          onInsert={() => onInsertCitation(note)}
        />
      ))}
    </div>
  </div>
);
