import Preact from "preact";
import { useState } from "preact/hooks";
import { IS_BROWSER } from "$fresh/runtime.ts";

export default function CopyButton(
  props: { textBefore: string; textAfter: string } & Preact.PropsWithChildren,
) {
  const [clicked, setClicked] = useState(false);

  const startReset = () => {
    setTimeout(() => {
      setClicked(false);
    }, 2_000);
  };

  return (
    <button
      onClick={() => {
        navigator.clipboard.writeText(props.text.toString());
        setClicked(true);
        startReset();
      }}
      disabled={!IS_BROWSER || props.disabled}
      class="px-2 py-1 border(gray-100 2) hover:bg-gray-200 mx-auto"
    >
      {clicked ? "Kopiert!" : props.children}
    </button>
  );
}