import React from 'react';
import { FiltersMap } from '@wix/bex-core';
import { observer } from 'mobx-react-lite';
import {
  CollectionMultiSelectCheckbox,
  CollectionMultiSelectCheckboxProps,
} from '../CollectionMultiSelectCheckbox';
import { FilterTranslationProvider } from '../../providers';

export interface MultiSelectCheckboxFilterProps<
  V,
  F extends FiltersMap = FiltersMap,
> extends CollectionMultiSelectCheckboxProps<V, F> {}

function _MultiSelectCheckboxFilter<V, F extends FiltersMap = FiltersMap>(
  props: MultiSelectCheckboxFilterProps<V, F>,
) {
  return (
    <FilterTranslationProvider>
      <CollectionMultiSelectCheckbox {...props} />
    </FilterTranslationProvider>
  );
}

export const MultiSelectCheckboxFilter = observer(_MultiSelectCheckboxFilter);