import * as React from 'react';

export type PreviewWidgetSkin = 'neutral' | 'gradient' | 'custom';
export type PreviewWidgetContentOutline = 'shadow' | 'border' | 'none';

export interface PreviewWidgetProps {
  /** Applies a data-hook HTML attribute to be used in the tests*/
  dataHook?: string;
  /** Specifies a CSS class name to be appended to the component’s root element.
   * @internal
   */
  className?: string;
  /** Sets the color of the content area background (`neutral` or `gradient`). To use custom skin color, set it to `custom` and use the `backgroundColor` prop
   * @default 'neutral'
   */
  skin?: PreviewWidgetSkin;
  /** Sets the content outline as `shadow` (default), `border` or `none`
   * @default 'shadow'
   */
  contentOutline?: PreviewWidgetContentOutline;
  /** Sets content area background color in HEX code. Can be set with custom colors (from WSR design system color palette) */
  backgroundColor?: string;
  /** Adjusts the height of the component or can be set in specific % or px
   * @default 'auto'
   */
  height?: string;
  /** Sets the width of the component in % or px
   * @default '100%'
   */
  width?: string;
  /** Enables vertical scroll of the overflowed content *
   * @default false
   */
  scrollable?: boolean;
  /** Sets the main preview content. Accepts an image, text paragraph or any other custom element */
  children: React.ReactNode;
}

declare const PreviewWidget: React.ComponentClass<PreviewWidgetProps>;

export default PreviewWidget;