import {Space} from 'antd';
import {ChildrenFC} from '@utils';
import css from './index.module.css';
import {FormEvent} from 'react';

type Props = {
  onSearch: () => void;
  testId: string;
};

const FilterFieldWrapper: ChildrenFC<Props> = function ({
  children,
  onSearch,
  testId: testid,
}) {
  function onSubmit(e: FormEvent) {
    e.preventDefault();
    onSearch();
  }

  return (
    <form data-testid={testid} onSubmit={onSubmit}>
      <Space wrap className={css.fieldGroup} size='middle'>
        {children}
      </Space>
    </form>
  );
};

export default FilterFieldWrapper;
