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 StepVerticalSize = 'md' | 'sm' | undefined

export type StepperVerticalProps = SystemProps & ThemingProps<'StepperVertical'> & ChildrenProp

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

export type StepVerticalTailProps = BoxProps & {
  size?: StepVerticalSize
  variant?: StepIndicatorVariant
}

export type StepVerticalTitleProps = BoxProps & {
  size?: StepVerticalSize
  variant?: StepIndicatorVariant
}
