import { ReactNode } from 'react'

import { BoxProps } from '../box'
import { ChildrenProp } from '../core'
import { IconProp } from '../icon'
import { StepIndicatorVariant } from '../stepIndicator/stepIndicatorTypes'
import { SystemProps } from '../system'
import { ThemingProps } from '../theme'

export type StepHorizontalSize = 'md' | 'sm' | undefined

export type StepperHorizontalProps = SystemProps & ThemingProps<'StepperHorizontal'> & ChildrenProp

export type StepHorizontalProps = SystemProps &
  ChildrenProp & {
    icon?: IconProp
    number?: number
    size?: StepHorizontalSize
    description?: ReactNode
    title?: ReactNode
    disabled?: boolean
    className?: string
    variant?: StepIndicatorVariant
  }

export type StepHorizontalTailProps = BoxProps & {
  variant?: StepIndicatorVariant
}

export type StepHorizontalTitleProps = BoxProps & {
  size?: StepHorizontalSize
  variant?: StepIndicatorVariant
}
