import React from 'react';

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

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

export default Input;