src/components/Ad/Ad.js

import React, { Component } from 'react'
import { AppContext } from 'src/components/Layout/Layout'
import PropTypes from 'prop-types'
import Swiper from 'react-id-swiper'
import classNames from 'classnames'

import styles from './Ad.module.scss'

const promoContent = [
  'У вас есть стартап или идея стартапа?',
  'Вам нужно проверить гипотезу или создать MVP?',
  'Вам нужна помощь в разработке?',
  'Вам нужна помощь в поиске инвестиций?',
  'Обращайтесь в нашу лабораторию и мы вам поможем',
]

const promoContentEn = [
  'Do you have a startup or startup idea?',
  'Need to test a hypothesis or create a MVP?',
  'Do you need a help in development?',
  'Do you need a help in investment search?',
  'Сontact our laboratory and we will help',
]

class Ad extends Component {
  createContent = (lang) => {
    if (lang === 'en') {
      return promoContentEn
    } else {
      return promoContent
    }
  }

  render() {
    const { isInSingleJob } = this.props
    const params = {
      slidesPerView: 1,
      loop: true,
      // custom styles in the end of src/styles/_swiper.sccs
      containerClass: 'custom-container',
      effect: 'fade',
      autoplay: {
        delay: 3000,
      },
      pagination: {
        el: '.swiper-pagination.custom-swiper-pagination',
        clickable: true,
        renderBullet: (index, className) => {
          return '<span class="' + className + '">' + (index + 1) + '</span>'
        },
      },
    }

    return (
      <AppContext.Consumer>
        {(locale) => {
          return (
            <article
              className={classNames(styles.root, {
                [styles.isInSingleJob]: isInSingleJob,
              })}
            >
              <a
                rel="noopener noreferrer"
                href="https://startupscaleup.io/"
                target="_blank"
                className={styles.wrapperLink}
              >
                <Swiper {...params}>
                  {this.createContent(locale || this.props.locale).map((item, index) => (
                    <div className={styles.slide} key={index}>
                      {item}
                    </div>
                  ))}
                </Swiper>
              </a>
              <div className={styles.title}>
                <span>startupscaleup</span>
              </div>
            </article>
          )
        }}
      </AppContext.Consumer>
    )
  }
}

Ad.propTypes = {
  slidesPerView: PropTypes.number,
  loop: PropTypes.bool,
  containerClass: PropTypes.string,
  effect: PropTypes.string,
  autoplay: PropTypes.shape({
    delay: PropTypes.number,
  }),
  pagination: PropTypes.shape({
    el: PropTypes.string,
    clickable: PropTypes.bool,
    renderBullet: PropTypes.func,
  }),
}

export default Ad