'use client'

import { ButtonHTMLAttributes } from 'react'
import { Copy } from 'lucide-react'
import { cn } from '@/utils/cn'

type CopyButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  textToCopy: string
}

export function CopyButton({ textToCopy, className, ...props }: CopyButtonProps) {
  const handleCopy = () => {
    navigator.clipboard.writeText(textToCopy)
  }

  return (
    <button
      className={cn('text-fg-dim hover:text-fg transition-colors js-only', className)}
      onClick={handleCopy}
      {...props}
    >
      <Copy className="w-4 h-4" />
    </button>
  )
}