import React from 'react';

interface TerminalInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
  label?: string;
  error?: string;
  fullWidth?: boolean;
}

/**
 * TerminalInput - Monospace, terminal-styled input component
 *
 * Features:
 * - IBM Plex Mono font for terminal aesthetic
 * - Dense padding (8px vertical)
 * - Terminal-style borders with blue focus state
 * - Optional label and error display
 * - Full width variant available
 */
export const TerminalInput: React.FC<TerminalInputProps> = ({
  label,
  error,
  fullWidth = false,
  className = '',
  ...props
}) => {
  const baseClasses = [
    'font-mono text-sm bg-term-bg border rounded-md transition-colors duration-150',
    'placeholder:text-term-text-tertiary',
    'focus:outline-none focus:border-info focus:ring-1 focus:ring-info',
    'disabled:opacity-50 disabled:cursor-not-allowed',
  ];

  const paddingClasses = 'px-3 py-2'; // 12px horizontal, 8px vertical (dense)

  const widthClasses = fullWidth ? 'w-full' : '';

  const errorClasses = error
    ? 'border-negative focus:border-negative focus:ring-negative'
    : 'border-term-border hover:border-term-border-focus';

  const classes = [
    ...baseClasses,
    paddingClasses,
    widthClasses,
    errorClasses,
    className,
  ]
    .filter(Boolean)
    .join(' ');

  return (
    <div className={fullWidth ? 'w-full' : ''}>
      {label && (
        <label className="block text-xs font-medium text-term-text-muted mb-1.5 font-mono">
          {label}
        </label>
      )}
      <input className={classes} {...props} />
      {error && (
        <p className="mt-1 text-xs text-negative font-mono">{error}</p>
      )}
    </div>
  );
};
