IdChip

npx shadcn@latest add @jengacore/id-chip

"use client"

import * as React from "react"
import { Check, Copy } from "lucide-react"

import { shortId } from "@/lib/jengacore/format"
import { cn } from "@/lib/utils"

/**
 * Mono reference for transfer IDs, case and member numbers and message types (pacs.008), with copy.
 * `short` shortens in the middle (tx_01J9…H3V) and keeps the full value in the tooltip.
 */
export function IdChip({
  id,
  short,
  copy = true,
  className,
}: {
  id: string
  short?: boolean
  copy?: boolean
  className?: string
}) {
  const [copied, setCopied] = React.useState(false)
  return (
    <span
      data-slot="id-chip"
      title={id}
      className={cn("inline-flex h-6 items-center gap-1.5 rounded-sm bg-muted px-2 font-mono text-xs text-foreground", className)}
    >
      {short ? shortId(id) : id}
      {copy ? (
        <button
          type="button"
          aria-label={`Copy ${id}`}
          className="inline-flex rounded-xs text-muted-foreground hover:text-foreground"
          onClick={(e) => {
            e.stopPropagation()
            void navigator.clipboard?.writeText(id)
            setCopied(true)
            window.setTimeout(() => setCopied(false), 1200)
          }}
        >
          {copied ? <Check className="size-3.5 stroke-2 text-success" /> : <Copy className="size-3.5 stroke-[1.75]" />}
          <span className="sr-only" aria-live="polite">
            {copied ? "Copied" : ""}
          </span>
        </button>
      ) : null}
    </span>
  )
}