import type { ComponentType, ReactNode } from 'react'
import { Variant } from './Common'
import { IconProps } from './Icon'

export type StatusTokensProps = {
  backgroundColor: string
  backgroundGradient: string
  borderColor: string
  borderRadius: number | string
  borderWidth: number | string
  fontName: string
  fontSize: number | string
  fontWeight: number | string
  icon: IconProps
  iconColor: string
  iconGradient: string
  marginLeft: string | number
  paddingBottom: string | number
  paddingLeft: string | number
  paddingRight: string | number
  paddingTop: string | number
  textColor: string
  textLineHeight: string | number
  iconSize: number | string
  iconPaddingTop: number | string
}

export interface StatusProps {
  children: ReactNode
  variant?: Variant
  tokens?: Partial<StatusTokensProps>
  customGradient?: (
    gradient: { colors: string[]; start: { x: number; y: number }; end: { x: number; y: number } },
    styles: Record<string, unknown>,
    content: ReactNode
  ) => ReactNode
}

declare const Status: ComponentType<StatusProps>

export { Status }