Copy Button

'use client'

import {
  useEffect,
  useRef,
  useState,
  type ComponentPropsWithRef,
  type CSSProperties,
  type ReactNode
} from 'react'

const VISUALLY_HIDDEN: CSSProperties = {
  position: 'absolute',
  width: 1,
  height: 1,
  padding: 0,
  margin: -1,
  overflow: 'hidden',
  clip: 'rect(0 0 0 0)',
  whiteSpace: 'nowrap',
  border: 0
}

/* Older browsers and insecure origins have no async clipboard. */
const fallbackCopy = (text: string) => {
  const area = document.createElement('textarea')
  area.value = text
  area.setAttribute('readonly', '')
  Object.assign(area.style, { position: 'fixed', opacity: '0' })
  document.body.append(area)
  area.select()
  document.execCommand('copy')
  area.remove()
}

export interface CopyButtonProps
  extends Omit<ComponentPropsWithRef<'button'>, 'value' | 'children'> {
  /** The text to copy, or a function that returns it at the moment of the click. */
  value: string | (() => string)
  onCopied?: () => void
  /** "Copied" is announced in a polite live region; change the words here. */
  announcement?: string
  children?: ReactNode | ((state: { copied: boolean }) => ReactNode)
}

/**
 * Copies `value` (or what it returns) to the clipboard. For two seconds afterwards it carries
 * `data-state="copied"`, and a live region announces the copy.
 */
export function CopyButton({
  value,
  onCopied,
  announcement = 'Copied',
  onClick,
  children,
  ...props
}: CopyButtonProps) {
  const [copied, setCopied] = useState(false)
  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)

  useEffect(() => () => clearTimeout(timer.current), [])

  const copy = async () => {
    const text = typeof value === 'function' ? value() : value
    try {
      await navigator.clipboard.writeText(text)
    } catch {
      fallbackCopy(text)
    }
    setCopied(true)
    onCopied?.()
    clearTimeout(timer.current)
    timer.current = setTimeout(() => setCopied(false), 2000)
  }

  return (
    <>
      <button
        type="button"
        {...props}
        data-scope="copy-button"
        data-part="root"
        data-state={copied ? 'copied' : 'idle'}
        onClick={event => {
          onClick?.(event)
          if (!event.defaultPrevented) void copy()
        }}
      >
        {typeof children === 'function' ? children({ copied }) : children}
      </button>
      <span role="status" style={VISUALLY_HIDDEN}>
        {copied ? announcement : ''}
      </span>
    </>
  )
}