import { Box } from '../box'
import { vui } from '../core'
import { cs } from '../utils'
import { boldTitles, stepClassName, titleColor } from './consts'
import { StepVerticalTitleProps } from './stepperVerticalTypes'

/**
 * Implements vertical stepper tail (the vertical line) **
 */
export const StepVerticalTitle = vui<'div', StepVerticalTitleProps>((props, ref) => {
  const { children, className, size = 'md', variant = 'active', ...rest } = props
  return (
    <Box
      className={cs(stepClassName + 'Title')}
      color={titleColor[variant]}
      fontSize={`${size === 'md' ? 16 : 14}px`}
      fontWeight={boldTitles.includes(variant) ? 600 : undefined}
      pt={`${size === 'md' ? 4 : 2}px`}
      whiteSpace="nowrap"
      {...rest}
    >
      {children}
    </Box>
  )
})

StepVerticalTitle.displayName = 'StepVerticalTitle'

export default StepVerticalTitle
