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 (
    <thead ref={ref}>
      <Row tokens={tokens}>
        {React.Children.map(children, (child) =>
          // TO DO: pass type as a variant instead of prop
          React.cloneElement(child, { type: 'heading' })
        )}
      </Row>
    </thead>
  )
})

Header.displayName = 'Header'

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

export default Header