import * as React from 'react';

type chartData = {
  label: Date;
  value: number;
};

export interface SparklineChartProps {
  /** 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;
  /** Sets the data points of the chart. Each point has a `label` date, plotted on the x axis, and a numeric `value`, plotted on the y axis. */
  data: chartData[];
  /** Sets the color of the sparkline. */
  color?: string;
  /** Sets the width of the sparkline (pixels) */
  width?: number;
  /** Sets the height of the sparkline (pixels) */
  height?: number;
  /** Indicates the starting index of the highlighted area. Default is 0. */
  highlightedStartingIndex?: number;
  /** Indicates the ending index of the highlighted area. Default is the last one. */
  highlightedEndingIndex?: number;
  /** Tooltip content (JSX) getter function.  */
  getTooltipContent?: (index: number) => React.ReactNode;
  /** Defines a callback function which is called when the hovered data point changes. Receives the index of the data point closest to the pointer. */
  onHover?: (index: number) => void;
  /** Sets the duration of the animation in milliseconds.
   * @default 300
   */
  animationDuration?: number;
}

export class SparklineChart extends React.PureComponent<SparklineChartProps> {}

export {};