// @flow
import type { Node } from 'react';
import type { TranslatedContent } from '../../../types';
import type { ColorPaletteColorNameKey } from '../../../mixins/branding';
import type { SpaceProps } from '../../../mixins/spacing';
import type { StackeeProps } from '../../../mixins/stackee';
import type { StylableProps } from '../../../mixins/themes';
import type { TestingProps } from '../../../mixins/testing';
import type { AriaProps } from '../../../mixins/aria';

export type ClickableListItemIcon = {|
  backgroundColor?: ColorPaletteColorNameKey,
  imgSrc: string | Node,
  altText?: string,
|};
export type ClickableListItemProp = {|
  id: string,
  text: TranslatedContent,
  disabled?: boolean,
  icon?: ClickableListItemIcon,
|};

export type ClickableListProps = {|
  ...TestingProps,
  ...SpaceProps,
  ...StackeeProps,
  ...StylableProps,
  ...AriaProps,
  label?: TranslatedContent,
  options: Array<ClickableListItemProp>,
  onClick: (string) => void,
  disabled?: boolean,
|};
