import type { ComponentType, ReactNode } from 'react'
import { LetterSpacing, TextTransform, tagType, headingType, alignType } from './Common'

export interface TypographyProps {
  tag?: tagType | string
  block?: boolean
  align?: alignType | string
  strikeThrough?: boolean
  tokens?: TypographyTokens
  variant?: TypographyVariants
  heading?: headingType | string
  accessible?: boolean
  accessibilityLabel?: string
  children?: ReactNode
  dataSet?: Record<string, any>
}

export type TypographyVariants = {
  color?: string
  /** @deprecated Use `color` instead */
  colour?: string
  secondColor?: string
  animationDuration?: number
  size?: number | string
  radius?: number
  baseWidth?: number
  characters?: number
  spaceBetweenLines?: number
  squareRadius?: number
  lineRadius?: number
  inverse?: boolean
}

export type TypographyTokens = {
  fontName?: string
  superScriptFontSize?: number
  fontWeight?: number
  fontSize?: number
  color?: string
  lineHeight?: number
  textTransform?: TextTransform
  fontScaleCap?: number
  letterSpacing?: LetterSpacing
}

declare const Typography: ComponentType<TypographyProps>

export { Typography }