import React from 'react'
import BEMModule from 'utils/bem'
import Icon from 'react-uikit/icon'
import PropTypes from 'prop-types'
import Button from 'react-uikit/button'
import styles from './styles.scss'

const bem = new BEMModule(styles)

const CourseExportData = ({className, onExportData, isOwner}) => {
    const rootClassNames = bem.classNames('c-course-export-data', className)
    const iconClassNames = bem.classNames('c-course-export-data__icon')

    return (
        <div className={rootClassNames}>
            <h3>
                <Icon name="tab-activity" className={iconClassNames} />
                Challenge Data
            </h3>

            <Button
                disabled={!isOwner}
                variant="primary"
                onClick={onExportData}
            >
                Export data
            </Button>
            {!isOwner && (
                <p>{`Data export is only available to the organizer of ${
                    name || 'this challenge'
                }.`}</p>
            )}
        </div>
    )
}

CourseExportData.propTypes = {
    className: PropTypes.string,
    isOwner: PropTypes.bool,
    onExportData: PropTypes.func,
}

export default CourseExportData