import { useState } from "react";
import { TbCopy, TbCopyCheck } from "react-icons/tb";

import styles from "@/components/administrator/styles/form.module.css";

const CopyBox = (props) => {
  const [isCopied, setIsCopied] = useState(false);

  return (
    <>
      <p className={styles.copy_box_title}>{props.label}</p>
      <div className={styles.copy_box_copy}>
        <input
          type="text"
          value={props.value || ""}
          readOnly
        />
        <button
          title="Copy to Clipboard"
          onClick={() => {
            if (isCopied) return;
            navigator.clipboard.writeText(props.value || "");
            setIsCopied(true);

            if (props.callback && typeof props.callback === "function")
              props.callback();

            setTimeout(() => {
              setIsCopied(false);
            }, 1500);
          }}>
          {isCopied ? <TbCopyCheck /> : <TbCopy />}
        </button>
      </div>
    </>
  );
};

export default CopyBox;
