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, buttonDataQa } = props
  const handleClick = (event: Event) => {
    if (isFunction(onButtonClick)) {
      onButtonClick(event)
    }
  }

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

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

export { defaultRenderTitle, defaultRenderAddress }