import React from 'react'
import PropTypes from 'prop-types'
import { getTokensPropType } from '@telus-uds/components-base'
import Row from './Row'

const Header = React.forwardRef(({ children, tokens }, ref) => {
  return (
    <Row ref={ref} tokens={tokens}>
      {React.Children.map(children, (child) =>
        // TO DO: pass type as a variant instead of prop
        React.cloneElement(child, { type: 'subHeading' })
      )}
    </Row>
  )
})

Header.displayName = 'Header'

Header.propTypes = {
  children: PropTypes.node,
  tokens: getTokensPropType('Table')
}

export default Header