import Image from 'next/image'
import Link from 'next/link'
import { Button } from './ui'
import type { NostrProfile } from '@/types/nostr'
import { NotificationCenter } from './NotificationCenter'

interface ConnectedUserMenuProps {
  pubkey: string
  profile: NostrProfile | null
  onDisconnect: () => void
  loading: boolean
}

export function ConnectedUserMenu({
  pubkey,
  profile,
  onDisconnect,
  loading,
}: ConnectedUserMenuProps): React.ReactElement {
  const displayName = profile?.name ?? `${pubkey.slice(0, 8)}...`

  return (
    <div className="flex items-center gap-4">
      <NotificationCenter userPubkey={pubkey} />
      <Link
        href="/profile"
        className="flex items-center gap-2 hover:opacity-80 transition-opacity"
      >
        {profile?.picture && (
          <Image
            src={profile.picture}
            alt={displayName}
            width={32}
            height={32}
            className="rounded-full object-cover"
          />
        )}
        <span className="text-sm font-medium">{displayName}</span>
      </Link>
      <Button
        variant="secondary"
        size="small"
        onClick={onDisconnect}
        disabled={loading}
      >
        Disconnect
      </Button>
    </div>
  )
}