import { Box } from '../box'
import { vui } from '../core'
import { cs } from '../utils'
import { tailClassName, tailClassNameLeft, tailClassNameRight } from './consts'
import { StepHorizontalTailProps } from './stepperHorizontalTypes'

/**
 * Implements Horizontal stepper tail (the Horizontal line) **
 */
export const StepHorizontalTail = vui<'div', StepHorizontalTailProps>((props, ref) => {
  const { children, className, variant = 'active', ...rest } = props
  return (
    <Box
      className={cs(tailClassName)}
      h="16px"
      justifyContent="space-between"
      position="absolute"
      ref={ref}
      w="100%"
      {...rest}
    >
      <Box className={cs(tailClassName, tailClassNameLeft, tailClassNameLeft + variant)} />
      <Box className={cs(tailClassName, tailClassNameRight, tailClassNameLeft + variant)} />
    </Box>
  )
})

StepHorizontalTail.displayName = 'StepHorizontalTail'

export default StepHorizontalTail
