import React, { ReactNode } from 'react';
import { Box, BoxProps } from '@wix/design-system';
import { CollectionStateProps } from '../collectionStateProps';
import { observer } from 'mobx-react-lite';
import { FiltersMap } from '@wix/bex-core';

export interface CollectionPageHeaderProps<T, F extends FiltersMap = FiltersMap>
  extends Partial<BoxProps>,
    CollectionStateProps<T, F> {
  children?: ReactNode;
}

export function _CollectionPageHeader<T, F extends FiltersMap = FiltersMap>(
  props: CollectionPageHeaderProps<T, F>,
) {
  const { state, children, ...rest } = props;
  const {
    initTask,
    result: { total },
  } = state;
  return (
    <Box direction="horizontal" {...rest}>
      <Box paddingRight="9px">{children}</Box>
      {initTask.status.isSuccess && (
        <Box dataHook="page-header-total-count" color="D40">
          {total}
        </Box>
      )}
    </Box>
  );
}

export const CollectionPageHeader = observer(_CollectionPageHeader);