"use client";

import { useAppKit } from "@reown/appkit/react";
import { useAccount } from "wagmi";

export default function WalletStatus({ proxyConnected }: { proxyConnected: boolean }) {
  const { open } = useAppKit();
  const { address, isConnected, chain } = useAccount();

  return (
    <div className="flex items-center justify-between gap-4 rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
      <div className="flex items-center gap-3">
        {/* Proxy status indicator */}
        <div className="flex items-center gap-2 text-sm">
          <span
            className={`inline-block h-2.5 w-2.5 rounded-full ${
              proxyConnected
                ? "bg-emerald-500 shadow-[0_0_6px_rgba(16,185,129,0.6)]"
                : "bg-zinc-400 animate-pulse"
            }`}
          />
          <span className="text-zinc-500 dark:text-zinc-400">
            {proxyConnected ? "Proxy connected" : "Connecting to proxy..."}
          </span>
        </div>

        {/* Wallet info */}
        {isConnected && address && (
          <>
            <span className="text-zinc-300 dark:text-zinc-600">|</span>
            <div className="flex items-center gap-2 text-sm">
              <span className="inline-block h-2.5 w-2.5 rounded-full bg-blue-500" />
              <span className="font-mono text-zinc-700 dark:text-zinc-300">
                {address.slice(0, 6)}...{address.slice(-4)}
              </span>
              {chain && (
                <span className="rounded-md bg-zinc-100 px-2 py-0.5 text-xs text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400">
                  {chain.name}
                </span>
              )}
            </div>
          </>
        )}
      </div>

      <button
        onClick={() => open()}
        className="rounded-lg bg-zinc-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-zinc-700 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-200"
      >
        {isConnected ? "Switch Wallet" : "Connect Wallet"}
      </button>
    </div>
  );
}
