Function CopyButton

cli/src/components/copy-button.tsx:127–178

({
  textToCopy,
  children,
  leadingSpace = true,
  style,
})

 * ```
 */
export const CopyButton: React.FC<CopyButtonProps> = ({
  textToCopy,
  children,
  leadingSpace = true,
  style,
}) => {
  const [isCopied, setIsCopied] = useState(false)
  const [isHovered, setIsHovered] = useState(false)
  const { setTimeout } = useTimeout()

  const handleCopy = async () => {
    try {
      await copyTextToClipboard(textToCopy, {
        suppressGlobalMessage: true,
      })
      const newState = copyButtonHandlers.handleCopy()
      setIsCopied(newState.isCopied)
      setIsHovered(newState.isHovered)
      setTimeout('reset-copied', () => setIsCopied(false), COPIED_RESET_DELAY_MS)
    } catch (_error) {
      // Error is already logged and displayed by copyTextToClipboard
    }
  }

  const handleMouseOver = () => {
    const shouldHover = copyButtonHandlers.handleMouseOver(isCopied)
    if (shouldHover) {
      setIsHovered(true)
    }
  }

  const handleMouseOut = () => {
    setIsHovered(copyButtonHandlers.handleMouseOut())
  }

  return (
    <Clickable
      as="text"
      style={style}
      onMouseDown={handleCopy}
      onMouseOver={handleMouseOver}
      onMouseOut={handleMouseOut}
    >
      {children}
      <CopyIcon
        isCopied={isCopied}
        isHovered={isHovered}
        leadingSpace={leadingSpace}
      />
    </Clickable>
  )
}