import React from 'react'
import classNames from 'classnames';

interface Props {
    onChange: (str: string) => void;
    type: string,
    name: string,
    label: string,
    value: string,
  }

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