import React from 'react';
import propTypes from 'prop-types';
import '../styles/input.css';
import '../styles/main.css';

export const Input = ({ placeholder, value, type, disabled, isInvalid, isFullWidth, ...props }) => {

    const fullWidth = isFullWidth && 'full-width'
    const invalid = isInvalid && 'invalid'

    return (
        <input
            placeholder={placeholder}
            value={value}
            type={type}
            disabled={disabled}
            className={[fullWidth, invalid].join(' ')}
            {...props}
        />
    );
}

Input.propTypes = {
    placeholder: propTypes.string,
    value: propTypes.string,
    type: propTypes.oneOf(["email", "number", "search", "text", "tel", "url", "password"]),
    disabled: propTypes.bool,
    isInvalid: propTypes.bool,
    isFullWidth: propTypes.bool
};

Input.defaultProps = {
    placeholder: "Placeholder",
    value: "",
    type: "text",
    disabled: false,
    isInvalid: false,
    isFullWidth: false
}