import React from 'react';
import type { BaseComponentProps, IdentifiableProps, DisableableProps } from '../types';

/**
 * Props for Input component
 * FE-TYPE-013: Fully typed component props
 */
export interface InputProps extends BaseComponentProps, IdentifiableProps, DisableableProps {
  value?: string;
  defaultValue?: string;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
  placeholder?: string;
  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
  name?: string;
  required?: boolean;
  autoComplete?: string;
  autoFocus?: boolean;
  maxLength?: number;
  minLength?: number;
  pattern?: string;
  readOnly?: boolean;
}

export const Input = ({
  value,
  defaultValue,
  onChange,
  onBlur,
  onFocus,
  placeholder,
  type = 'text',
  id,
  name,
  className,
  disabled = false,
  required = false,
  autoComplete,
  autoFocus = false,
  maxLength,
  minLength,
  pattern,
  readOnly = false,
  style,
  'data-testid': testId,
  ...props
}: InputProps) => {
  return (
    <input
      id={id}
      name={name}
      type={type}
      value={value}
      defaultValue={defaultValue}
      onChange={onChange}
      onBlur={onBlur}
      onFocus={onFocus}
      placeholder={placeholder}
      className={className}
      disabled={disabled}
      required={required}
      autoComplete={autoComplete}
      autoFocus={autoFocus}
      maxLength={maxLength}
      minLength={minLength}
      pattern={pattern}
      readOnly={readOnly}
      style={style}
      data-testid={testId}
      {...props}
    />
  );
};