Copyable ID

"use client"

import * as React from "react"
import { cn } from "cn"

import { CopyButton } from "@/components/ui/copy-button"

function truncateMiddle(value: string, keep: number) {
  if (value.length <= keep * 2 + 1) return value
  return `${value.slice(0, keep)}…${value.slice(-keep)}`
}

function CopyableId({
  id,
  keep = 8,
  className,
  ...props
}: React.ComponentProps<"span"> & {
  id: string
  /** Characters kept on each side before truncating with an ellipsis. */
  keep?: number
}) {
  return (
    <span
      data-slot="copyable-id"
      className={cn(
        "inline-flex h-6 max-w-full items-center gap-0.5 rounded-md border bg-muted/40 pr-0.5 pl-2 font-mono text-xs text-muted-foreground",
        className
      )}
      {...props}
    >
      <span title={id} className="truncate">
        {truncateMiddle(id, keep)}
      </span>
      <CopyButton value={id} size="icon-xs" label={`Copy ${id}`} className="size-5" />
    </span>
  )
}

export { CopyableId, truncateMiddle }