import React from 'react'
import { DashboardHeaderProps } from './typings'
import { HeadingSection, StyledAvailableCredit } from './styled'
import {
  defaultRenderHeading,
  defaultRenderAvailableCredits,
  defaultRenderWrapper,
} from './renderProps'

class DashboardHeader extends React.PureComponent<DashboardHeaderProps> {
  static defaultProps = {
    className: '',
    // renderProps
    renderHeading: defaultRenderHeading,
    renderAvailableCredits: defaultRenderAvailableCredits,
    renderWrapper: defaultRenderWrapper,
  }
  render() {
    const {
      renderWrapper,
      renderHeading,
      renderAvailableCredits,
      ...remainingProps
    } = this.props
    const children = (
      <React.Fragment>
        <HeadingSection>{renderHeading(remainingProps)}</HeadingSection>
        <StyledAvailableCredit>
          {renderAvailableCredits(remainingProps)}
        </StyledAvailableCredit>
      </React.Fragment>
    )
    return renderWrapper({ children, ...remainingProps })
  }
}

export { DashboardHeader }
export default DashboardHeader