import { useState } from "react"
import { Check, Link2 } from "lucide-react"
import { shortId } from "../../lib/routes"

/**
 * Shows a short id and copies the full permalink (origin + `path`) on click,
 * so any issue, pattern, session or error can be referenced in a message.
 * The full id is in the tooltip and in the copied URL.
 */
export const CopyRef = ({ id, path, label = "Copy link" }: { id: string; path: string; label?: string }) => {
  const [copied, setCopied] = useState(false)
  return (
    <button
      type="button"
      onClick={(e) => {
        e.stopPropagation()
        void navigator.clipboard
          .writeText(window.location.origin + path)
          .then(() => {
            setCopied(true)
            setTimeout(() => setCopied(false), 1200)
          })
          .catch(() => undefined)
      }}
      title={`${label}: ${id}`}
      aria-label={`${label} for ${id}`}
      className="inline-flex h-[23px] shrink-0 items-center gap-1 rounded-[6px] border border-ds-line px-1.5 font-[family-name:var(--font-data)] text-[10.5px] text-ds-text-3 hover:border-ds-line-strong hover:text-ds-text-2"
    >
      {copied ? <Check className="h-3 w-3 text-ds-ok" aria-hidden="true" /> : <Link2 className="h-3 w-3" aria-hidden="true" />}
      {copied ? "copied" : shortId(id)}
    </button>
  )
}