import React from 'react'
import { RectanglePlaceholder, TextPlaceholder } from '@skava/ui/dist/components/atoms/Placeholder'
import { DashboardHeaderProps } from './typings'
import { Wrapper } from './styled'

// rendering heading
function defaultRenderHeading(props: DashboardHeaderProps) {
  return <RectanglePlaceholder width={150} height={22} />
}

// rendering the credits fields
function defaultRenderAvailableCredits(props: DashboardHeaderProps) {
  return <TextPlaceholder width={200} />
}

// rendering the main wrapper
function defaultRenderWrapper(props: DashboardHeaderProps) {
  const { className, children } = props
  const passThroughProps = Object.freeze({
    className,
    'data-qa': props['data-qa'],
  })
  return <Wrapper {...passThroughProps}>{children}</Wrapper>
}

export {
  defaultRenderAvailableCredits,
  defaultRenderHeading,
  defaultRenderWrapper,
}