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

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

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

export default Input;
