import type { ComponentType, ReactElement, ReactNode } from 'react'
import { TextAlign } from './Common'

export type ListVariants = {
  size?: 'small' | 'medium' | 'large'
  compact?: boolean
}

export type ListTokens = {
  interItemMargin?: number
  interItemMarginWithDivider?: number
  dividerColor?: string
  dividerSize?: number
  itemBulletContainerWidth?: number
  itemBulletContainerAlign?: TextAlign
  itemBulletWidth?: number
  itemBulletHeight?: number
  itemBulletColor?: string
  itemIconSize?: number
  itemIconColor?: string
  listGutter?: number
}

export interface ListProps {
  tokens?: ListTokens
  variant?: ListVariants
  children: ReactNode | ReactElement
  showDivider?: boolean
  testID?: string
}

export interface ListItemProps {
  tokens?: ListItemTokens
  children: ReactNode | ReactElement
  icon?: ReactNode | string
  iconColor?: string
  iconSize?: number
  iconVerticalAlign?: 'top' | 'center' | 'bottom'
  title?: string
  testID?: string
}

export interface ListItemTokens {
  iconMarginTop?: number
  itemFontWeight?: number
  itemFontSize?: number
  itemLineHeight?: number
  itemFontName?: string
}

declare const List: ComponentType<ListProps> & {
  Item: ComponentType<ListItemProps>
}

export { List }