import React from 'react'

import { Box } from '../box'
import { vui } from '../core'
import { cs } from '../utils'
import { tailClassName, variantColor } from './consts'
import { StepVerticalTailProps } from './stepperVerticalTypes'

/**
 * Implements vertical stepper tail (the vertical line) **
 */
export const StepVerticalTail = vui<'div', StepVerticalTailProps>((props, ref) => {
  const { children, className, size = 'md', variant = 'active', ...rest } = props
  return (
    <Box
      borderRight={`1px solid ${variantColor[variant]}`}
      className={cs(tailClassName)}
      maxW="16px"
      minH="100%"
      position="absolute"
      ref={ref}
      w={`${size === 'md' ? 16 : 12}px`}
      {...rest}
    />
  )
})

StepVerticalTail.displayName = 'StepVerticalTail'

export default StepVerticalTail
