import React from 'react'
import PropTypes from 'prop-types';
import classNames from 'classnames';

interface Props {
    onChange: PropTypes.func,
    type: PropTypes.string,
    name: PropTypes.string,
    label: PropTypes.string,
    value: PropTypes.string,
  }

  export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
    return(
        <div className={'blocks'}>
            <span className={'input input_filled'}>
                <input className={'input_field input_field_mui'} type={type} name={name} onChange={onChange} value={value}/>
                <label className={'input_label input_label_mui'} htmlFor={label}>
                    <span className={classNames('input_label_content', 'input_label_content_mui')}>{label}</span>
                </label>
            </span>
      </div>
    )
}