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

export const MemoOutlineRail: React.FC<{
  blocks: MemoBlockCandidate[];
  onInsertBlock: (block: MemoBlockCandidate) => void;
}> = ({ blocks, onInsertBlock }) => (
  <div className="space-y-2 rounded-2xl border border-term-border bg-term-surface p-4">
    <div>
      <h3 className="text-xs uppercase tracking-[0.2em] text-term-text-tertiary">Memo Outline</h3>
      <p className="mt-1 text-xs text-term-text-tertiary">Promote these section candidates into the draft.</p>
    </div>
    {blocks.length === 0 ? (
      <p className="text-sm text-term-text-muted">No memo blocks generated yet.</p>
    ) : (
      blocks.map((block) => (
        <button
          key={`${block.sectionKind}-${block.headline}`}
          type="button"
          onClick={() => onInsertBlock(block)}
          className="w-full rounded-xl border border-term-border bg-term-bg px-3 py-3 text-left transition-colors hover:border-info/50"
        >
          <div className="text-[10px] uppercase tracking-[0.18em] text-term-text-tertiary">
            {block.sectionKind.replace(/_/g, ' ')}
          </div>
          <div className="mt-1 text-sm font-semibold text-term-text">{block.headline}</div>
          <div className="mt-1 text-xs text-term-text-tertiary">{Math.round(block.confidence * 100)}% confidence</div>
        </button>
      ))
    )}
  </div>
);
