import { useMemo } from 'react'

import { useStyleConfig, vui } from '../core'
import { cs, filterUndefined } from '../utils'
import { StepperHorizontalProvider } from './context'
import StepperHorizontalBase from './stepperHorizontalBase'
import { StepperHorizontalProps } from './stepperHorizontalTypes'

/**
 * [Beta] Implements Horizontal stepper **
 */
export const StepperHorizontal = vui<'div', StepperHorizontalProps>((props, ref) => {
  const { children, className, size, ...rest } = props
  const styles = useStyleConfig('StepperHorizontal', props)

  const context = useMemo(() => filterUndefined({ size }), [size])

  return (
    <StepperHorizontalProvider value={context}>
      <StepperHorizontalBase
        className={cs('vui-stepperHorizontal', className)}
        ref={ref}
        {...styles.container}
        {...rest}
      >
        {children}
      </StepperHorizontalBase>
    </StepperHorizontalProvider>
  )
})

StepperHorizontal.displayName = 'StepperHorizontal'

export default StepperHorizontal
