import React from 'react'
import PropTypes from 'prop-types'
import {Button} from '@equitysim/react-uikit'
import Icon from 'react-uikit/icon'
import {copyToClipboard} from 'common-fe/utils/browser'
import BEMModule from 'utils/bem'
import styles from './styles.scss'

const bem = new BEMModule(styles)

const CopyValue = ({size, value, onCopy}) => {
    const classes = bem.classNames('c-copy-value')
    const iconClasses = bem.classNames('c-copy-value__icon')
    const valueClasses = bem.classNames('c-copy-value__value')

    const copy = () => {
        copyToClipboard(value)
        onCopy && onCopy()
    }

    return (
        <Button
            className={classes}
            size={size}
            title="Copy to clipboard"
            onClick={copy}
        >
            <span className={valueClasses}>{value}</span>
            <Icon className={iconClasses} name="copy" />
        </Button>
    )
}

CopyValue.propTypes = {
    value: PropTypes.string.isRequired,
    size: PropTypes.string,
    onCopy: PropTypes.func,
}

CopyValue.defaultProps = {
    size: 'small',
}

export default CopyValue