// @flow
import PropTypes from 'prop-types';
import type { TranslatedContent } from '../../types';
import { translatedContentPropType } from '../../types';
import { type SpaceProps, spacePropTypes } from '../../mixins/spacing';
import type { FontSize } from '../../mixins/typography';
import { typographyPropTypes } from '../../mixins/typography';

export type AnimatedFilterBarProps = SpaceProps & {
  options: Array<{
    value: string,
    label: TranslatedContent,
  }>,
  fontSize?: FontSize,
  value?: ?string,
  onChange: (input: string) => void,
};

export const animatedFilterBarPropTypes = {
  ...spacePropTypes,
  options: PropTypes.arrayOf(
    PropTypes.shape({
      value: PropTypes.string.isRequired,
      label: translatedContentPropType.isRequired,
    }).isRequired,
  ).isRequired,
  fontSize: typographyPropTypes.fontSize,
  value: PropTypes.string,
  onChange: PropTypes.func.isRequired,
};
