import React from 'react';
import { Field } from 'formik';

export interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  ref?: React.Ref<HTMLInputElement>
}

const focusStyles = 'focus:outline-none focus:shadow focus:border-gray-400';
const baseStyles = 'p-2 border bg-white border-gray-300 rounded-sm';

const InputBase: React.FC<Props> = ({ label, ref, ...props }) => {
  return (
    <div className="m-2 mb-4 flex flex-col">
      <label htmlFor={props?.name} className="mb-1 text-sm text-gray-600">{label}</label>
      <input
        id={props?.name}
        ref={ref}
        placeholder={label}
        className={`${baseStyles} ${focusStyles}`}
        {...props}
      />
    </div>
  );
};

const Input: React.FC<Props> = props => <Field {...props} as={InputBase} />;

export default Input;