import PropTypes from 'prop-types';
import styles from './styles.module.css';

const Input = ({ name, label, error = '', ...inputPprops }) => {
  return (
    <div className={styles.inputWrapper}>
      {label && (
        <label htmlFor={name} className={styles.label}>
          {label}
        </label>
      )}
      <input
        name={name}
        id={name}
        className={`${styles.input} ${error ? styles.errorInput : ''}`}
        {...inputPprops}
      />
      {error && <p className={styles.errorText}>{error}</p>}
    </div>
  );
};

Input.propTypes = {
  onChange: PropTypes.func.isRequired,
  type: PropTypes.string,
  value: PropTypes.string,
  placeholder: PropTypes.string
};

export default Input;
