import React, { ComponentType, ReactNode } from 'react';
import { EmptyState, EmptyStateProps } from '@wix/design-system';
import { observer } from 'mobx-react-lite';
import { CollectionState, FiltersMap } from '@wix/bex-core';
import { useEmptyStateTexts } from '../../hooks';

export interface CollectionEmptyStateBaseProps<T, F extends FiltersMap>
  extends Partial<EmptyStateProps> {
  state: CollectionState<T, F>;
  component?: ComponentType<EmptyStateProps>;
  children?: ReactNode;
}
function _CollectionEmptyStateBase<T, F extends FiltersMap>(
  props: CollectionEmptyStateBaseProps<T, F>,
) {
  const { component: Component = EmptyState } = props;
  const { title, subtitle } = useEmptyStateTexts(props);

  return <Component title={title} subtitle={subtitle} {...props} />;
}

export const CollectionEmptyStateBase = observer(_CollectionEmptyStateBase);