'use client'

import { useState, type CSSProperties } from 'react'
import { Check, Link2 } from 'lucide-react'

export function CopyLinkButton({
  label = 'Copier le lien',
  copiedLabel = 'Copié',
  className,
  style,
}: {
  label?: string
  copiedLabel?: string
  className?: string
  style?: CSSProperties
}) {
  const [copied, setCopied] = useState(false)

  const onCopy = async () => {
    try {
      await navigator.clipboard.writeText(window.location.href)
      setCopied(true)
      window.setTimeout(() => setCopied(false), 2000)
    } catch {
      // ignore
    }
  }

  return (
    <button
      type="button"
      onClick={() => void onCopy()}
      className={className}
      style={style}
      aria-label={copied ? copiedLabel : label}
      title={copied ? copiedLabel : label}
    >
      {copied ? <Check size={13} strokeWidth={2.25} /> : <Link2 size={13} strokeWidth={2.25} />}
      <span>{copied ? copiedLabel : label}</span>
    </button>
  )
}