import * as React from 'react';

export type SkeletonContentType = 'line';
export type SkeletonContentSize = 'small' | 'medium' | 'large' | 'full';
export type SkeletonAlignment = 'start' | 'middle';
export type SkeletonSpacing = 'small' | 'medium' | 'large';
export type SkeletonContent = {
  type: SkeletonContentType;
  size: SkeletonContentSize;
};

export interface SkeletonProps {
  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook?: string;
  /** Specifies a CSS class name to be appended to the component’s root element.
   * @internal
   */
  className?: string;
  /** The type of the skeleton */
  content: SkeletonContent[];
  /** The position of the indicating progress line
   * @default 'start'
   */
  alignment?: SkeletonAlignment;
  /** The space between the first and second lines
   * @default 'medium'
   */
  spacing?: SkeletonSpacing;
}

export default class Skeleton extends React.PureComponent<SkeletonProps> {}