// 'use client'

// import { Button } from '@workspace/ui/components/button'
// import {
//   DropdownMenu,
//   DropdownMenuContent,
//   DropdownMenuItem,
//   DropdownMenuTrigger
// } from '@workspace/ui/components/dropdown-menu'
// import { cn } from '@workspace/ui/lib/utils'
// import { ChevronDown, LogOut } from 'lucide-react'
// import { useState } from 'react'

// interface WalletSessionBadgeProps {
//   address: string
//   className?: string
// }

// export function WalletSessionBadge({
//   address,
//   className
// }: WalletSessionBadgeProps) {
//   const [isConnected, setIsConnected] = useState(true)

//   return (
//     <DropdownMenu>
//       <DropdownMenuTrigger asChild>
//         <Button
//           variant="outline"
//           className={cn(
//             'flex items-center space-x-2 rounded-md border px-3 py-1.5 text-sm font-medium',
//             'hover:bg-accent hover:text-accent-foreground',
//             'dark:bg-accent/5 dark:hover:bg-accent/10',
//             className
//           )}
//         >
//           <span className="relative flex h-2 w-2">
//             <span
//               className={cn(
//                 'absolute inline-flex h-full w-full animate-ping rounded-full opacity-75',
//                 isConnected ? 'bg-green-400' : 'bg-red-400'
//               )}
//             />

//             <span
//               className={cn(
//                 'relative inline-flex h-2 w-2 rounded-full',
//                 isConnected ? 'bg-green-500' : 'bg-red-500'
//               )}
//             />
//           </span>
//           <span>{address}</span>
//           <ChevronDown className="h-4 w-4" />
//         </Button>
//       </DropdownMenuTrigger>
//       <DropdownMenuContent align="end">
//         <DropdownMenuItem
//           className="flex cursor-pointer items-center text-destructive focus:text-destructive"
//           onClick={() => setIsConnected(false)}
//         >
//           <LogOut className="mr-2 h-4 w-4" />
//           <span>Disconnect</span>
//         </DropdownMenuItem>
//       </DropdownMenuContent>
//     </DropdownMenu>
//   )
// }

'use client'
import { useWallet } from '@/context/WalletContext'
import { Button } from '@workspace/ui/components/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger
} from '@workspace/ui/components/dropdown-menu'
import { cn } from '@workspace/ui/lib/utils'
import { ChevronDown, LogOut } from 'lucide-react'

export function WalletSessionBadge() {
  const { wallet, isConnected, connect, disconnect } = useWallet()
  
  // Format address for display
  const formatAddress = (address?: string) => {
    if (!address) return 'Connect Wallet'
    return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="outline"
          className={cn(
            'flex items-center space-x-2 rounded-md border px-3 py-1.5 text-sm font-medium',
            'hover:bg-accent hover:text-accent-foreground',
            'dark:bg-accent/5 dark:hover:bg-accent/10'
          )}
        >
          <span className="relative flex h-2 w-2 mr-2">
            <span
              className={cn(
                'absolute inline-flex h-full w-full animate-ping rounded-full opacity-75',
                isConnected ? 'bg-green-400' : 'bg-red-400'
              )}
            />

            <span
              className={cn(
                'relative inline-flex h-2 w-2 rounded-full',
                isConnected ? 'bg-green-500' : 'bg-red-500'
              )}
            />
          </span>
          <span>{isConnected && wallet?.address 
            ? formatAddress(wallet.address) 
            : 'Connect Wallet'}</span>
          <ChevronDown className="h-4 w-4 ml-2" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        {isConnected ? (
          <>
            <div className="px-2 py-1.5">
              <p className="text-sm font-medium">Connected Wallet</p>
              <p className="text-xs text-muted-foreground font-mono truncate max-w-[200px]">
                {wallet?.address}
              </p>
            </div>
            <DropdownMenuItem
              className="flex cursor-pointer items-center text-destructive focus:text-destructive"
              onClick={disconnect}
            >
              <LogOut className="mr-2 h-4 w-4" />
              <span>Disconnect</span>
            </DropdownMenuItem>
          </>
        ) : (
          <DropdownMenuItem
            className="flex cursor-pointer items-center"
            onClick={connect}
          >
            <span>Connect Wallet</span>
          </DropdownMenuItem>
        )}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}