import React from 'react'
import { AddressProps } from './typings'
import { Wrapper, Container, StyledTitlePlaceholder, StyledAddressPlaceholder } from './styled'

function defaultRenderTitle(props: AddressProps) {
  return <StyledTitlePlaceholder width={200} height={18} />
}

function defaultRenderAddress(props: AddressProps) {
  return (
    <React.Fragment>
      <StyledAddressPlaceholder width={180} height={14} />
      <StyledAddressPlaceholder width={160} height={14} />
      <StyledAddressPlaceholder width={190} height={14} />
    </React.Fragment>
  )
}

function defaultRenderContainer(props: AddressProps) {
  const { renderTitle, renderAddress, ...remainingProps } = props
  const titleView = renderTitle(remainingProps)
  const addressView = renderAddress(remainingProps)
  return (
    <Container>
      {titleView}
      {addressView}
    </Container>
  )
}

function defaultRenderWrapper(props: AddressProps) {
  const { className, children } = props
  return <Wrapper className={className}>{children}</Wrapper>
}

export { defaultRenderWrapper, defaultRenderContainer, defaultRenderAddress, defaultRenderTitle }