import React, { useState } from "react";
import useCopying from "./useCopying";
import CopyingTooltip from "./CopyingTooltip";

export default ({ text }) => {
  const [textareaChild, copyText] = useCopying(text);
  const [hovered, setHovered] = useState(false);
  const [copied, setCopied] = useState(false);

  return (
    <div className="click-to-copy">
      <span
        className="click-to-copy__text"
        onClick={() => {copyText(); setCopied(true)}}
        onMouseOver={() => {setCopied(false); setHovered(true)}}
        onMouseOut={() => setHovered(false)}
      >
        {text}
      </span>
      <CopyingTooltip hovered={hovered} copied={copied}/>
      {textareaChild}
    </div>
  )
}