text: 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;
  `
  