import React from 'react';
import { TerminalEntry } from '../../types/terminal';
import { TerminalOutput } from './TerminalOutput';
import { CommandInput } from './CommandInput';

interface TerminalProps {
  history: TerminalEntry[];
  isProcessing: boolean;
  outputRef: React.RefObject<HTMLDivElement | null>;
  onSubmit: (command: string) => void;
  getPreviousCommand: () => string | null;
  getNextCommand: () => string | null;
  resetCommandIndex: () => void;
}

export const Terminal: React.FC<TerminalProps> = ({
  history,
  isProcessing,
  outputRef,
  onSubmit,
  getPreviousCommand,
  getNextCommand,
  resetCommandIndex
}) => {
  return (
    <div className="flex flex-col h-full bg-[#0a0a0a] relative">
      {/* Subtle scanline effect */}
      <div className="absolute inset-0 pointer-events-none opacity-[0.03] bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(0,0,0,0.1)_2px,rgba(0,0,0,0.1)_4px)]" />

      {/* Command Input */}
      <div className="flex-shrink-0 p-6 border-b border-[#2a2a2a] bg-[#0a0a0a]">
        <CommandInput
          onSubmit={onSubmit}
          isProcessing={isProcessing}
          getPreviousCommand={getPreviousCommand}
          getNextCommand={getNextCommand}
          resetCommandIndex={resetCommandIndex}
        />
      </div>

      {/* Terminal Output */}
      <TerminalOutput history={history} outputRef={outputRef} />
    </div>
  );
};
