import { useField } from 'formik';
import React from 'react';
import { useFormikError } from '../useFormikError';
import { CustomTags, CustomTagsProps } from './CustomTags';

export const CustomTagsField: React.FC<
  Omit<CustomTagsProps, 'error' | 'onChange'>
> = (props) => {
  const error = useFormikError(props.name);
  const [field, , helpers] = useField(props.name);

  return (
    <CustomTags
      {...props}
      value={field.value}
      error={error}
      onChange={(e) => helpers.setValue(e.currentTarget.value)}
    />
  );
};
