import React, { useState } from 'react'
import { FaRegCopy } from 'react-icons/fa'
import { copyTextToClipboard } from '../../helpers/copyTextToClipboard'

const CopyButton = ({ text, title } ) => {
    const [isCopied, setIsCopied] = useState(false)
    const handleCopyClick = () => {
        copyTextToClipboard(text)
        setIsCopied(true)
        setTimeout(() => {
            setIsCopied(false)
        }, 3000)
    }
  return (
    <button className='flex items-start gap-1' onClick={handleCopyClick} title={title}> 
    <div className='flex items-center'>
    <FaRegCopy />  
    </div>
    <div className='text-xs -mt-1'>
         {isCopied ? 'Copied' : 'Copy'}
        </div>
        </button>
  )
}

export default CopyButton