import React from 'react'
import PropTypes from 'prop-types'
import BEMModule from 'utils/bem'
import Illustration from 'react-uikit/illustration'
import LogoBar from 'components/logo-bar'
import moment from 'moment'
import styles from './styles.scss'

const bem = new BEMModule(styles)

const ContentSection = ({
    className,
    data: {
        name,
        endDate,
        startDate,
        welcomeMessage,
        description,
        paidSeats,
        currentSeats = 0,
    },
}) => {
    const classes = bem.classNames('c-join-page__content-section', className)
    const mainClasses = bem.classNames('c-join-page__content-section__main')
    const titleClasses = bem.classNames('c-join-page__content-section__title')
    const subtitleClasses = bem.classNames(
        'c-join-page__content-section__subtitle'
    )
    const durationClasses = bem.classNames(
        'c-join-page__content-section__duration'
    )
    const descriptionClasses = bem.classNames(
        'c-join-page__content-section__description'
    )
    const participantsClasses = bem.classNames(
        'c-join-page__content-section__participants'
    )
    const cloudClasses = bem.classNames(
        'c-join-page__content-section__illustration--cloud'
    )
    const teamworkClasses = bem.classNames(
        'c-join-page__content-section__illustration--teamwork'
    )

    return (
        <div className={classes}>
            <Illustration name="cloud-one" className={cloudClasses} />
            <Illustration name="teamwork" className={teamworkClasses} />
            <LogoBar />

            <main className={mainClasses}>
                <h1 className={titleClasses}>{name}</h1>
                <p className={durationClasses}>
                    {moment(startDate).format('MMMM Do YYYY')}
                    <span>&emsp;•&emsp;</span>
                    {moment(endDate).format('MMMM Do YYYY')}
                </p>
                <h2 className={subtitleClasses}>{welcomeMessage}</h2>
                <p className={descriptionClasses}>{description}</p>
                <div className={participantsClasses}>
                    <p>
                        Current <br />
                        Participants
                    </p>
                    <p>
                        {currentSeats}
                        {paidSeats && <span> / {paidSeats}</span>}
                    </p>
                </div>
            </main>
        </div>
    )
}

ContentSection.propTypes = {
    data: PropTypes.object.isRequired,
    className: PropTypes.string,
}

export default ContentSection