import React from 'react'
import PropTypes from 'prop-types'
import modalTypes from 'containers/modal-manager/modal-types'
import BEMModule from 'utils/bem'

import Button from 'react-uikit/button'
import {Flex} from 'react-uikit/layout'
import {Section} from 'components/layout'

import styles from './styles.scss'

const bem = new BEMModule(styles)

const CourseNone = ({showModal}) => {
    const handleClick = () => {
        showModal?.({type: modalTypes.MODAL_COURSE_CREATION})
        return
    }

    const classes = bem.classNames('c-course-none')
    const buttonClasses = bem.classNames('c-course-none__button')
    const headingClasses = bem.classNames('c-course-none__heading')
    const subHeadingClasses = bem.classNames('c-course-none__sub-heading')

    return (
        <Section className={classes}>
            <Flex
                align="center"
                direction="column"
                justify="center"
                style={{height: '100%'}}
            >
                <h2 className={headingClasses}>
                    {`You don't have any active`}
                    <br />
                    {`Course Challenges`}
                </h2>
                <Button
                    className={buttonClasses}
                    variant="primary"
                    size="large"
                    onClick={handleClick}
                >
                    Get Started
                </Button>
                <h3 className={subHeadingClasses}>
                    Follow our step by step guide
                </h3>
                <a
                    href="https://learn.equitysim.com/en/articles/3486158-instructor-on-boarding"
                    rel="noopener noreferrer"
                    target="_blank"
                >
                    Read here
                </a>
            </Flex>
        </Section>
    )
}

CourseNone.propTypes = {
    showModal: PropTypes.func,
}

export default CourseNone