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

// rendering heading
function defaultRenderHeading(props: DashboardCardProps) {
  return <TextPlaceholder width={'75%'} />
}

// rendering the Description
function defaultRenderDescription(props: DashboardCardProps) {
  return <StyledDescription rows={2} itemHeight={16} widthList={[95, 75]} />
}

// rendering the button
function defaultRenderButton(props: DashboardCardProps) {
  return <StyledButton height={50} />
}

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

export {
  defaultRenderHeading,
  defaultRenderDescription,
  defaultRenderButton,
  defaultRenderWrapper,
}