import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'

import Icon from 'react-uikit/icon'

import styles from './styles.scss'
import BEMModule from 'utils/bem'
const bem = new BEMModule(styles)

const CourseDuration = ({startDate, endDate}) => {
    const rootClassNames = bem.classNames('c-course-duration')
    const headingClassNames = bem.classNames('c-course-duration__heading')
    const iconClassNames = bem.classNames('c-course-duration__icon')
    const dateClassNames = bem.classNames('c-course-duration__date')
    const dateFormat = 'MMM Do, YYYY'

    return (
        <div className={rootClassNames}>
            <div className={headingClassNames}>
                <h3>
                    <Icon className={iconClassNames} name="alert-expired" />
                    <span>&emsp;Challenge Duration</span>
                </h3>
            </div>
            <div>
                <p className={dateClassNames}>
                    <span>Start Date</span>
                    <span>{moment(startDate).format(dateFormat)}</span>
                </p>
                <p className={dateClassNames}>
                    <span>End Date</span>
                    <span>{moment(endDate).format(dateFormat)}</span>
                </p>
            </div>
        </div>
    )
}

CourseDuration.propTypes = {
    endDate: PropTypes.string,
    startDate: PropTypes.string,
}

export default CourseDuration