import { createSignal } from "solid-js"
import { IconClipboard, IconCheckCircle } from "../icons"
import styles from "./copy-button.module.css"

interface CopyButtonProps {
  text: string
}

export function CopyButton(props: CopyButtonProps) {
  const [copied, setCopied] = createSignal(false)

  function handleCopyClick() {
    if (props.text) {
      navigator.clipboard.writeText(props.text)
        .catch((err) => console.error("Copy failed", err))

      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    }
  }

  return (
    <div data-component="copy-button" class={styles.root}>
      <button
        type="button"
        onClick={handleCopyClick}
        data-copied={copied() ? true : undefined}
      >
        {copied()
          ? <IconCheckCircle width={16} height={16} />
          : <IconClipboard width={16} height={16} />
        }
      </button>
    </div>
  )
}