import React from 'react'
import PropTypes from 'prop-types'
import Button from 'react-uikit/button'
import {Flex} from 'react-uikit/layout'
import Banner from 'components/banner'
import styles from './styles.scss'
import BEMModule from 'utils/bem'

const bem = new BEMModule(styles)

const EmptyState = ({onInviteUsers}) => {
    const buttonClasses = bem.classNames(
        'c-participants-table__empty-state__button'
    )

    return (
        <Banner neutral>
            <Flex align="center" direction="column" justify="center">
                There are currently no participants to display.
                <Button
                    className={buttonClasses}
                    variant="primary"
                    onClick={onInviteUsers}
                >
                    Invite
                </Button>
            </Flex>
        </Banner>
    )
}

EmptyState.propTypes = {
    onInviteUsers: PropTypes.func,
}

export default EmptyState