import React from 'react'

export type TextTransform = {
  CAPITALIZE: 'capitalize'
  LOWERCASE: 'lowercase'
  UPPERCASE: 'uppercase'
  NONE: 'none'
}

export type LetterSpacing = {
  NORMAL: 'normal'
  LENGTH: number
}

export type CopyType = {
  EN: 'en'
  FR: 'fr'
}

export type Size = {
  margin?: number
  padding?: number
  height?: number | string
  width?: number | string
}

export type Position = 'auto' | 'above' | 'below' | 'right' | 'left'

export type DisplaySize = {
  LARGE: 'large'
  MEDIUM: 'medium'
  SMALL: 'small'
  MICRO: 'micro'
}

export enum Sizes {
  xs = 'xs',
  sm = 'sm',
  md = 'md',
  lg = 'lg',
  xl = 'xl'
}

export type ResponsiveSpacing = {
  [key in Sizes]?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11
}

export type Direction = 'column' | 'row' | 'column-reverse' | 'row-reverse'

export type ResponsiveDirection = {
  [key in Sizes]?: Direction
}

export type SemanticTag =
  | 'h1'
  | 'h2'
  | 'h3'
  | 'h4'
  | 'h5'
  | 'h6'
  | 'article'
  | 'aside'
  | 'blockquote'
  | 'footer'
  | 'figure'
  | 'form'
  | 'header'
  | 'ul'
  | 'li'
  | 'main'
  | 'nav'
  | 'section'
  | 'label'

export type headingType = {
  H1: 'h1'
  H2: 'h2'
  H3: 'h1'
  H4: 'h2'
  H5: 'h1'
  H6: 'h2'
}

export type tagType = {
  HEADING: headingType
  BLOCKQUOTE: 'blockquote'
  CODE: 'code'
  DEL: 'del'
  EM: 'em'
  INS: 'ins'
  LI: 'li'
  STRONG: 'strong'
  LABEL: 'label'
}

export type alignType = {
  AUTO: 'auto'
  LEFT: 'left'
  RIGHT: 'right'
  CENTER: 'center'
  JUSTIFY: 'justify'
}

export type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'

export type FlexJustify = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around'

export type TextAlign = 'auto' | 'left' | 'right' | 'center' | 'justify'

export type Variant = Record<string, string | number | boolean | undefined>