import React from 'react';
import type { ReactNode } from 'react';
import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
import type {
  SparklineInteractiveHeaderSignVariant,
  SparklineInteractiveHeaderVariant,
} from '@coinbase/cds-common/types/SparklineInteractiveHeaderBaseProps';
export * from '@coinbase/cds-common/types/SparklineInteractiveHeaderBaseProps';
export type SparklineInteractiveSubHead = {
  /**
   * Free form percentage change
   */
  percent: string;
  /**
   * Sign to denote the change in price
   */
  sign: SparklineInteractiveHeaderSignVariant;
  /**
   * The variant to use for the price and percentage change
   */
  variant: SparklineInteractiveHeaderVariant;
  /**
   * Show the dollar amount of price change
   */
  priceChange?: string;
  /**
   * The accessoryText to show after the price and / or percentage change. An example is "All time"
   */
  accessoryText?: string;
  /**
   * The accessibilityLabel to show for the price and / or percentage change. This should be localized
   * @example
   * // First, configure your i18n strings
   * const messages = defineMessages({
   *   subHeadPrefix: {
   *     id: `${i18nKey}.subHeadPrefix`,
   *     defaultMessage: 'Price increase in the amount of',
   *     description: 'A prefix to make it clear which direction the price action was moving',
   *   }
   * });
   *
   * // then  provide the translated string the accessibilityLabel prop
   * messages.subHeadPrefix
   */
  accessibilityLabel?: string;
};
export type SparklineInteractiveHeaderValues = {
  /**
   * Describes what the Header represents e.g. Bitcoin Price
   */
  label?: string;
  /**
   * Main content of header, this is usually the price
   */
  title?: React.ReactNode;
  /**
   * Provides additional information about the title, such as a price change
   */
  subHead?: SparklineInteractiveSubHead;
};
export type SparklineInteractiveHeaderRef = {
  update: (params: SparklineInteractiveHeaderValues) => void;
};
export type SparklineInteractiveHeaderProps = SharedProps & {
  /**
   * Default title, changing this prop has no effect once the default is rendered. If you use a ReactNode that is not a string, then you cannot use the text based label that supports updates.
   */
  defaultTitle: React.ReactNode;
  /**
   * Default label, changing this prop has no effect once the default is rendered.
   */
  defaultLabel?: string;
  /**
   * Default SubHead, changing this prop has no effect once the default is rendered.
   */
  defaultSubHead?: SparklineInteractiveSubHead;
  /**
   * Adds a label node that allows React components. If you use this node then you cannot use the text based label that supports updates.
   */
  labelNode?: React.ReactNode;
  /**
   * Reduce the font size used for the header itself.
   */
  compact?: boolean;
};
export declare const interpolateSubHeadText: (subHead: SparklineInteractiveSubHead) => string;
type SparklineInteractiveHeaderMobileProps = {
  /**
   * Adds content next to the header. This is useful for interactive buttons
   */
  trailing?: ReactNode;
} & SparklineInteractiveHeaderProps;
export declare const SparklineInteractiveHeader: React.MemoExoticComponent<
  ({
    ref,
    defaultLabel,
    defaultTitle,
    defaultSubHead,
    testID,
    trailing,
    labelNode,
  }: SparklineInteractiveHeaderMobileProps & {
    ref?: React.Ref<SparklineInteractiveHeaderRef>;
  }) => import('react/jsx-runtime').JSX.Element
>;
//# sourceMappingURL=SparklineInteractiveHeader.d.ts.map