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-[#1d2430] bg-[#10151d] p-4">
    <div>
      <h3 className="text-xs uppercase tracking-[0.2em] text-[#7f93ab]">Memo Outline</h3>
      <p className="mt-1 text-xs text-[#6f8096]">Promote these section candidates into the draft.</p>
    </div>
    {blocks.length === 0 ? (
      <p className="text-sm text-[#7d8fa6]">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-[#263140] bg-[#111925] px-3 py-3 text-left transition-colors hover:border-[#4d6887]"
        >
          <div className="text-[10px] uppercase tracking-[0.18em] text-[#83a3c5]">
            {block.sectionKind.replace(/_/g, ' ')}
          </div>
          <div className="mt-1 text-sm font-semibold text-[#eef4ff]">{block.headline}</div>
          <div className="mt-1 text-xs text-[#7f93ab]">{Math.round(block.confidence * 100)}% confidence</div>
        </button>
      ))
    )}
  </div>
);
