import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { t } from 'ttag';

import { textToClipboard } from 'proton-shared/lib/helpers/browser';
import Button from './Button';
import Icon from '../icon/Icon';
import { getClasses } from '../../helpers/component';

const Copy = ({ className }) => {
    const [copied, setCopied] = useState(false);

    const handleClick = () => {
        textToClipboard(this.props.value);

        if (!this.state.copied) {
            setCopied(true);
        }
    };

    return (
        <Button
            onClick={handleClick}
            className={getClasses(copied ? 'copied' : '', className)}
            title={copied ? t`Copied` : t`Copy`}>
            <Icon />
        </Button>
    );
};

Copy.propTypes = {
    value: PropTypes.string.isRequired,
    className: PropTypes.string
};

export default Copy;
@@ -707,16 +707,25 @@
 t%60Copy%60%7D
+%0A        
 %3E%0A      
@@ -735,16 +735,33 @@
    %3CIcon
+ name=%22clipboard%22
  /%3E%0A    
@@ -900,8 +900,9 @@
 lt Copy;
+%0A

Add Icon for Copy component