import React, { useState } from 'react'

import Tooltip from '../../../components/Tooltip/Tooltip'
import { type TooltipProps } from '../../../components/Tooltip/Tooltip'

interface CopyBoard {
  children: React.JSX.Element
  text: string
  tooltipPosition?: TooltipProps['position']
}

export const CopyToClipBoard = ({
  children,
  text,
  tooltipPosition = 'top',
}: CopyBoard) => {
  const [isCopied, setCopied] = useState(false)

  return (
    <div
      className='cursor-pointer'
      tabIndex={1}
      onBlur={() => setCopied(false)}
      onClick={() => {
        navigator.clipboard.writeText(text)
        setCopied(true)
      }}
    >
      <Tooltip
        tooltipContent={isCopied ? 'Copied!' : 'Click to copy'}
        position={tooltipPosition}
      >
        {children}
      </Tooltip>
    </div>
  )
}

export default CopyToClipBoard