import {JSX} from 'react';

export interface IInputFieldProps {
  label?: string;
  type: 'text' | 'password' | 'number';
  placeholder?: string;
  style?: Record<string, string>;
  disabled?: boolean;
  value: string;
  onValueChange: (value: string) => void;
  isRequired?: boolean;
}

export function InputField({label, type, value, onValueChange, placeholder, style, disabled, isRequired}: IInputFieldProps): JSX.Element {
  return (
    <>
      <label
        style={{
          display: 'block',
          ...(style || {})
        }}>
        {label}
        <input
          type={type}
          value={value}
          onChange={e => onValueChange(e.target.value)}
          placeholder={placeholder}
          disabled={disabled || false}
          required={isRequired}
        />
      </label>
    </>
  );
}
