import { useState } from 'react'
import { Check, Copy } from 'lucide-react'

interface CopyPillProps {
  label: string
  /** Отображаемое (может быть обрезано `text-overflow: ellipsis`) значение. */
  value: string
  /** Что именно копируется в буфер обмена (может отличаться от отображаемого значения). */
  copyText: string
}

/**
 * Пилюля «ссылка/номер» с копированием (DESIGN_SYSTEM.md §4.15, «Мои
 * конференции»). Статус «скопировано» передаётся сменой формы иконки
 * (Copy → Check) и текстовым тултипом — не только цветом.
 */
export function CopyPill({ label, value, copyText }: CopyPillProps) {
  const [copied, setCopied] = useState(false)

  async function handleCopy() {
    try {
      await navigator.clipboard.writeText(copyText)
    } catch {
      // Буфер обмена недоступен (нет разрешения/небезопасный контекст) — молча игнорируем.
    }
    setCopied(true)
    setTimeout(() => setCopied(false), 1500)
  }

  return (
    <div className="pill-group">
      <span className="pill-label">{label}</span>
      <div className="code-pill">
        <span className="pill-value">{value}</span>
        <button
          type="button"
          className="copy-btn"
          onClick={handleCopy}
          aria-label={copied ? 'Скопировано' : `Скопировать: ${label.toLowerCase()}`}
        >
          {copied ? (
            <Check className="icon-check" style={{ width: 14, height: 14 }} aria-hidden="true" />
          ) : (
            <Copy className="icon-copy" style={{ width: 14, height: 14 }} aria-hidden="true" />
          )}
          {copied && (
            <span className="copy-toast" aria-hidden="true">
              Скопировано
            </span>
          )}
        </button>
      </div>
    </div>
  )
}
