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

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

TableHeader.displayName = 'TableHeader'

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