import React from 'react';

interface IInputProps {
  id: string;
  type: string;
  name: string;
  value?: string;
  className?: string;
  placeholder?: string;
  hasError?: boolean;
  goodInput?: boolean;
  onChange(e: React.ChangeEvent<any>): void;
  onBlur(e: React.FormEvent<any>): void;
}

const InputText = ({
  id,
  type,
  name,
  value,
  placeholder,
  className,
  hasError,
  goodInput,
  onChange,
  onBlur,
}: IInputProps): JSX.Element => {
  return (
    <input
      id={id}
      type={type}
      name={name}
      value={value}
      placeholder={placeholder}
      onChange={onChange}
      onBlur={onBlur}
      className={`form-input text-sm border border-slate-200 rounded-md py-2 px-4 placeholder:text-xs focus:outline-none ${
        className || 'w-full'
      }   ${
        hasError ? '!border-rose-300' : goodInput ? '!border-emerald-300' : ''
      }`}
    />
  );
};

export default InputText;