import React from 'react'
import PropTypes from 'prop-types'

import { getTokensPropType, useThemeTokens } from '@telus-uds/components-base'

const withClientTheme = (Component) => {
  const UdsStyledComponent = ({ tokens: tokenOverrides, variant, ...props }) => {
    const theme = useThemeTokens(Component.displayName, tokenOverrides, variant)
    return <Component theme={theme} {...props} />
  }

  UdsStyledComponent.propTypes = {
    tokens: getTokensPropType(Component.displayName),
    variant: PropTypes.string
  }

  return UdsStyledComponent
}

export default withClientTheme