import React from 'react'
import PropTypes from 'prop-types'
import useMedia from 'global/hooks/use-media'
import BEMModule from 'utils/bem'
import styles from './styles.scss'

import Button from 'react-uikit/button'

const bem = new BEMModule(styles)
const MOBILE_BREAKPOINT = '(max-width: 560px)'

const PortfolioActivityHeader = ({exportData}) => {
    const {[MOBILE_BREAKPOINT]: isMobile} = useMedia([MOBILE_BREAKPOINT])
    const headingClassNames = bem.classNames('c-portfolio-activity-header')
    const exportClassNames = bem.classNames(
        'c-portfolio-activity-header__export'
    )

    return (
        <section className={headingClassNames}>
            <h1>Activity</h1>
            <Button
                className={exportClassNames}
                constrained
                isOutline
                variant="primary"
                title="Export Data"
                onClick={exportData}
                size={isMobile ? 'small' : 'medium'}
            >
                Export Data
            </Button>
        </section>
    )
}

PortfolioActivityHeader.propTypes = {
    exportData: PropTypes.func,
}

export default PortfolioActivityHeader