import React from 'react'

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

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

StepHorizontalTitle.displayName = 'StepHorizontalTitle'

export default StepHorizontalTitle
