import React from 'react'
import PropTypes from 'prop-types'
import { getThemeTokens, getTokensPropType } from '@telus-uds/components-base/server'

import getTheme from './get-theme-from-server'

const withServerTheme = (Component, componentName) => {
  const UdsStyledComponent = async ({ tokens: tokenOverrides, variant, ...props }) => {
    const componentTheme = await getTheme(componentName)
    const themeTokens = getThemeTokens(componentTheme, tokenOverrides, variant)
    return <Component theme={themeTokens} {...props} />
  }
  UdsStyledComponent.propTypes = {
    tokens: getTokensPropType(componentName),
    variant: PropTypes.string
  }

  return UdsStyledComponent
}

export default withServerTheme