import type { ProjectedMessage } from '../../types';

interface UndoRibbonProps {
  /** The synthetic undo-marker message emitted by the projector
   *  (`source === 'undo'`). */
  message: ProjectedMessage;
}

/**
 * Horizontal ribbon that marks where a `context.undo` record spliced earlier
 * prompts out of the conversation. Receives the `ProjectedMessage` whose
 * `source === 'undo'` so we can show how many prompts / messages were removed.
 */
export function UndoRibbon({ message }: UndoRibbonProps) {
  const count = message.undo?.count ?? 0;
  const removed = message.undo?.removedMessageCount ?? 0;
  return (
    <div className="my-3 flex items-center gap-3">
      <span className="h-px flex-1 bg-[var(--color-sev-warning)] opacity-50" />
      <span className="font-mono text-[11px] uppercase tracking-[0.12em] text-[var(--color-sev-warning)]">
        undid {count} prompt{count === 1 ? '' : 's'} · {removed} message{removed === 1 ? '' : 's'} removed · line {message.lineNo}
      </span>
      <span className="h-px flex-1 bg-[var(--color-sev-warning)] opacity-50" />
    </div>
  );
}