import React from 'react'
import { LogoIcon } from 'atoms/Icons'
import { CTABannerProps } from './typings'
import {
  StyledButton,
  StyledTitle,
  ButtonWrapper,
  TitleWrapper,
  LogoWrapper,
  BannerWrapper,
  Wrapper,
} from './styled'

function defaultRenderButton(props: CTABannerProps) {
  const { buttonLabel } = props
  return <StyledButton text={buttonLabel} />
}

function defaultRenderTitle(props: CTABannerProps) {
  const { title } = props
  return <StyledTitle content={title} />
}

function defaultRenderLogo(props: CTABannerProps) {
  const { logo } = props
  return <LogoIcon type={logo} />
}

function defaultRenderBox(props: CTABannerProps) {
  const { renderLogo, renderTitle, renderButton, backgroundImage, ...remainingProps } = props
  return (
    <BannerWrapper src={backgroundImage} >
      <LogoWrapper>{renderLogo(remainingProps)}</LogoWrapper>
      <TitleWrapper>{renderTitle(remainingProps)}</TitleWrapper>
      <ButtonWrapper>{renderButton(remainingProps)}</ButtonWrapper>
    </BannerWrapper>
  )
}

function defaultRenderWrapper(props: CTABannerProps) {
  const { className, dataQa, children } = props
  return <Wrapper className={className} data-qa={dataQa} >{children}</Wrapper>
}

export {
  defaultRenderButton,
  defaultRenderTitle,
  defaultRenderLogo,
  defaultRenderBox,
  defaultRenderWrapper,
}