import * as React from 'react';

interface IInputGroupProps {
  labelKey?: string
  labelText: string
  inputKey: string
  labelClassName: string
  inputClassName: string
  type: string
  value?: string
  checked?: boolean
  defaultValue?: string
  defaultChecked?: boolean
  isDisabled?: boolean
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
}

const className = `
        w-full
        text-xs font-medium transition-all text-gray-800 mt-1 px-3 py-2
        bg-white border-2 border-white rounded-lg placeholder-gray-800
        focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
        disabled:bg-slate-300 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none`;

export const InputGroup: React.FunctionComponent<IInputGroupProps> = (props) => {
  return <>
    <label
      key={props.labelKey}
      className={`mt-4 text-xs font-medium text-gray-800 ${props.labelClassName}`}
      htmlFor={props.inputKey}
    >
      { props.labelText }

    </label>
    <input
      key={props.inputKey}
      id={props.inputKey}
      className={`${className} ${props.inputClassName}`}
      type={props.type}
      value={props.value}
      defaultValue={props.defaultValue}
      checked={props.checked}
      defaultChecked={props.defaultChecked}
      onChange={props.onChange}
      disabled={props.isDisabled}
    />
  </>;
};