import React from 'react';

interface StatusLineProps {
  line: string;
}

/**
 * Renders a single status line with formatting:
 * - Tool calls: monospace tool name with colored result marker
 * - Thinking text: dimmed with box-drawing prefix
 */
const StatusLine: React.FC<StatusLineProps> = ({ line }) => {
  // Match tool call pattern: "toolName: arguments [OK]" or "toolName: arguments [ERR]"
  const toolMatch = line.match(/^(\S+?): (.+?)( \[OK\]| \[ERR\])?$/);

  if (toolMatch) {
    const toolName = toolMatch[1];
    const args = toolMatch[2];
    const marker = (toolMatch[3] || '').trim();

    return (
      <div className="ls-status-line ls-tool-call">
        <span className="ls-tool-name">{toolName}:</span>
        <span className="ls-tool-args"> {args}</span>
        {marker && (
          <span className={marker === '[OK]' ? 'ls-marker-ok' : 'ls-marker-err'}> {marker}</span>
        )}
      </div>
    );
  }

  // Thinking text
  return (
    <div className="ls-status-line ls-thinking">
      <span className="ls-thinking-prefix">{'\u2502'} </span>
      <span className="ls-thinking-text">{line}</span>
    </div>
  );
};

export default StatusLine;
