import React from 'react'
import { isFunction } from 'exotic'
import { ShippingAddressCardProps } from './typings'
import { Title, StyledAddress, HeaderButton } from './styled'

function defaultRenderTitle(props: ShippingAddressCardProps) {
  const { title, buttonLabel, onButtonClick } = props
  const handleClick = (event: Event) => {
    if (isFunction(onButtonClick)) {
      onButtonClick(event)
    }
  }

  return (
    <React.Fragment>
      <Title breedType={'h3'} content={title} />
      <HeaderButton text={buttonLabel} onClick={handleClick} />
    </React.Fragment>
  )
}

function defaultRenderAddress(props: ShippingAddressCardProps) {
  const { addressConfig } = props
  return <StyledAddress address={addressConfig} />
}

export { defaultRenderTitle, defaultRenderAddress }