import React from 'react'
import { SubscriptionItemProps } from './typings'
import {
  Image,
  StyledTextPlaceholder,
  DetailSection,
  ImageSection,
  Wrapper,
} from './styled'

function defaultRenderDetails(props: SubscriptionItemProps) {
  return (
    <React.Fragment>
      <StyledTextPlaceholder width={110} height={15} />
      <StyledTextPlaceholder width={95} height={15} />
    </React.Fragment>
  )
}

function defaultRenderImage(props: SubscriptionItemProps) {
  return <Image width={150} height={150} />
}

function defaultRenderBox(props: SubscriptionItemProps) {
  const {
    renderDetails,
    renderImage,
    ...remainingProps
  } = props

  const details = renderDetails(remainingProps)
  const image = renderImage(remainingProps)

  return (
    <React.Fragment>
      <ImageSection>{image}</ImageSection>
      <DetailSection>{details}</DetailSection>
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: SubscriptionItemProps) {
  const { className, children } = props
  const passthroughProps = Object.freeze({
    className,
    'data-qa': props['data-qa']
  })
  return <Wrapper {...passthroughProps}>{children}</Wrapper>
}

export {
  defaultRenderDetails,
  defaultRenderImage,
  defaultRenderBox,
  defaultRenderWrapper
}