import React from 'react'
import { wording } from 'src/words'
import { DashboardHeaderProps } from './typings'
import {
  CreditLabel,
  Price,
  DashboardTitle,
} from './styled'

// rendering heading
function defaultRenderHeading(props: DashboardHeaderProps) {
  return <DashboardTitle content={wording.dashBoardTitle} />
}

// rendering the credits fields
function defaultRenderAvailableCredits(props: DashboardHeaderProps) {
  return (
    <React.Fragment>
      <CreditLabel content={wording.dashBoardCreditLabel} />
      <Price content={props.creditPoint} />
    </React.Fragment>
  )
}

export {
  defaultRenderAvailableCredits,
  defaultRenderHeading,
}