import { useState } from 'react'
import clsx from 'clsx'

interface AddressProps {
  address: string
  chainId?: number
  showCopy?: boolean
  showENS?: boolean
  truncate?: boolean
  className?: string
}

export function Address({
  address,
  chainId,
  showCopy = true,
  showENS = false,
  truncate = false,
  className,
}: AddressProps) {
  const [copied, setCopied] = useState(false)

  const displayAddress = truncate
    ? `${address.slice(0, 6)}...${address.slice(-4)}`
    : address

  const handleCopy = async () => {
    await navigator.clipboard.writeText(address)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  return (
    <div className={clsx('flex items-center gap-2', className)}>
      <span className="font-mono text-sm">{displayAddress}</span>
      {showCopy && (
        <button
          onClick={handleCopy}
          className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
          title="Copy address"
        >
          {copied ? '✓' : '📋'}
        </button>
      )}
    </div>
  )
}