"use client";

import WalletStatus from "@/components/WalletStatus";
import PendingRequests from "@/components/PendingRequests";
import ChainGuard from "@/components/ChainGuard";
import { useProxySocket } from "@/hooks/useProxySocket";

export default function Home() {
  const { pendingRequests, proxyConnected, requiredChainId, respond } = useProxySocket();

  return (
    <div className="flex min-h-screen flex-col bg-zinc-50 font-sans dark:bg-zinc-950">
      {/* Header */}
      <header className="border-b border-zinc-200 bg-white px-6 py-4 dark:border-zinc-800 dark:bg-zinc-900">
        <div className="mx-auto flex max-w-2xl items-center justify-between">
          <div>
            <h1 className="text-lg font-bold tracking-tight text-zinc-900 dark:text-zinc-100">
              prpc
            </h1>
            <p className="text-xs text-zinc-500 dark:text-zinc-400">
              Proxy RPC Signing Interface
            </p>
          </div>
        </div>
      </header>

      {/* Main content */}
      <main className="mx-auto flex w-full max-w-2xl flex-1 flex-col gap-4 px-6 py-6">
        <WalletStatus proxyConnected={proxyConnected} />
        <ChainGuard requiredChainId={requiredChainId}>
          <PendingRequests requests={pendingRequests} onRespond={respond} />
        </ChainGuard>
      </main>
    </div>
  );
}
