import styled from 'styled-components'
import t from 'prop-types'
import { lighten } from 'polished'

import { Button, media } from 'ui'

export const CTABox = ({ text, icon: Icon, cta, ctaUrl }) => {
  return (
    <Wrapper>
      {Icon && <Icon />}
      <Text>{text}</Text>
      <Button as='a' href={ctaUrl}>{cta}</Button>
    </Wrapper>
  )
}

CTABox.propTypes = {
  text: t.string.isRequired,
  icon: t.elementType.isRequired,
  cta: t.string.isRequired,
  ctaUrl: t.string.isRequired,
}

const Wrapper = styled.div`
  padding: 7.5rem 3rem 3rem;
  background-color: ${({ theme }) => lighten(0.07, theme.colors.background)};
  width: 100%;
  text-align: center;

  > a {
    display: block;
    width: 100%;
  }

  ${media.greaterThan('sm')`
    max-width: 30rem;
  `}

  ${media.lessThan('sm')`
    &:not(:first-child) {
      margin-top: 5rem;
    }
  `}
`

const Text = styled.h4`
  font-size: clamp(1.6rem, 4vw, 2rem);
  margin: 1.6rem 0 5.7rem;
  font-weight: 400;
`