import * as React from 'react';
import { TooltipCommonProps } from '../common';

export interface ThumbnailProps {
  children?: React.ReactNode;
  dataHook?: string;
  className?: string;
  title?: React.ReactNode;
  description?: React.ReactNode;
  image?: React.ReactNode;
  size?: ThumbnailSize;
  selected?: boolean;
  disabled?: boolean;
  border?: boolean;
  hideSelectedIcon?: boolean;
  backgroundImage?: React.ReactNode;
  onClick?: (
    event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
  ) => void;
  onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;
  width?: string | number;
  height?: string | number;
  contentAlignment?: ThumbnailContentAlignment;
  ellipsis?: boolean;
  maxLines?: number;
  textPosition?: 'inside' | 'outside';
  noPadding?: boolean;
  /** Allows to pass all common tooltip props.
   * @linkTypeTo components-overlays--tooltip
   * @setTypeName TooltipCommonProps
   */
  tooltipProps?: TooltipCommonProps;
}

export default class Thumbnail extends React.PureComponent<ThumbnailProps> {
  focus: () => void;
}

export type ThumbnailSize = 'tiny' | 'small' | 'medium';

export type ThumbnailContentAlignment = 'top' | 'center';