import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { c } from 'ttag';
import { Icon, Button, classnames, Tooltip } from 'react-components';
import { textToClipboard } from 'proton-shared/lib/helpers/browser';

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

    const handleClick = () => {
        textToClipboard(value);
        onCopy && onCopy();

        if (!copied) {
            setCopied(true);
        }
    };

    return (
        <Button onClick={handleClick} className={classnames([className, copied && 'copied'])}>
            <Tooltip title={copied ? c('Label').t`Copied` : c('Label').t`Copy`}>
                <Icon name="clipboard" />
            </Tooltip>
        </Button>
    );
};

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

export default Copy;

@@ -17,16 +17,35 @@
 useState
+, useEffect, useRef
  %7D from 
@@ -357,16 +357,49 @@
 (false);
+%0A    const timeoutRef = useRef();
 %0A%0A    co
@@ -549,15 +549,294 @@
     
-%7D%0A    %7D
+    timeoutRef.current = setTimeout(() =%3E %7B%0A                setCopied(false);%0A            %7D, 2000);%0A        %7D%0A    %7D;%0A%0A    useEffect(() =%3E %7B%0A        return () =%3E %7B%0A            if (timeoutRef.current) %7B%0A                clearTimeout(timeoutRef.current);%0A            %7D%0A        %7D;%0A    %7D, %5B%5D)
 ;%0A%0A 

Fix CP-90 Review the popover for copy button