import React from 'react'
import { HeroBannerProps } from './typings'
import {
  StyledImage,
  RedLogo,
  StyledLink,
  StyledTitle,
  ButtonWrapper,
  TitleWrapper,
  LogoWrapper,
  BannerWrapper,
  Wrapper,
} from './styled'

function defaultRenderButton(props: HeroBannerProps) {
  const { buttonLabel, url } = props
  return <StyledLink to={url} text={buttonLabel} />
}

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

function defaultRenderLogo(props: HeroBannerProps) {
  const { logo } = props
  return (
    <StyledImage
      src={
        logo
          ? logo
          : 'https://raderain-cdn.sirv.com/devs/home/home-logo-adspot.png'
      }
      alt={'Logo'}
    />
  )
}

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

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

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