import React from 'react';
import { ChevronDown, ChevronUp } from 'lucide-react';

interface OutputTerminalProps {
  output: string;
  showOutput: boolean;
  onToggle: () => void;
  outputEndRef?: React.RefObject<HTMLDivElement>;
  title?: string;
}

/**
 * Terminal-style output display component for setup wizard steps.
 * Shows command output with collapsible functionality and auto-scrolling support.
 */
export const OutputTerminal: React.FC<OutputTerminalProps> = ({
  output,
  showOutput,
  onToggle,
  outputEndRef,
  title = 'Installation Output'
}) => {
  return (
    <div className="space-y-2">
      <button
        onClick={onToggle}
        className="flex items-center gap-2 text-sm font-medium w-full text-foreground"
      >
        {showOutput ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
        {title}
      </button>

      {showOutput && (
        <div className="rounded-md p-4 font-mono text-xs overflow-auto max-h-96 border border-border bg-muted text-foreground">
          <pre className="whitespace-pre-wrap break-words">{output || 'Waiting for output...'}</pre>
          {outputEndRef && <div ref={outputEndRef} />}
        </div>
      )}
    </div>
  );
};
