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

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

const InputBase: React.FC<Props> = ({ label, ...props }) => {
  return (
    <div className="m-2 mb-4 flex flex-col">
      <label htmlFor={props?.name} className="mb-1 text-gray-700">{label}</label>
      <input
        id={props?.name}
        placeholder={label}
        className="p-2 border-2 border-black focus:outline-none"
        {...props}
      />
    </div>
  );
};

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

export default Input;