---
import Layout from '../layouts/Layout.astro';
import { WalletConnect } from '../components/react/WalletConnect';
---

<Layout title="NounVerse - My Assets">
  <div class="space-y-6">
    <div>
      <h1 class="text-4xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent mb-4">
        My Nouns
      </h1>
      <p class="text-gray-300">
        Connect your wallet to view your Noun collection
      </p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- Wallet Connection -->
      <div class="lg:col-span-1">
        <div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
          <h2 class="text-xl font-semibold mb-4">Wallet Connection</h2>
          <div id="wallet-connect">
            <WalletConnect client:load />
          </div>
        </div>
      </div>

      <!-- Portfolio Overview -->
      <div class="lg:col-span-2">
        <div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
          <h2 class="text-xl font-semibold mb-4">Portfolio Overview</h2>
          <div class="text-center py-12">
            <div class="text-6xl mb-4">🎭</div>
            <h3 class="text-lg text-white mb-2">Connect Wallet to View Portfolio</h3>
            <p class="text-gray-400">
              Connect your Ethereum wallet to see your Nouns collection and portfolio value
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
      <h2 class="text-xl font-semibold mb-4">Quick Actions</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <a
          href="https://nouns.wtf"
          target="_blank"
          rel="noopener noreferrer"
          class="block p-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-center"
        >
          <div class="text-2xl mb-2">🏛️</div>
          <div class="font-semibold">Nouns.wtf</div>
          <div class="text-sm opacity-75">Official Nouns Site</div>
        </a>
        <a
          href="/semantic-search"
          class="block p-4 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-center"
        >
          <div class="text-2xl mb-2">🔍</div>
          <div class="font-semibold">Search Nouns</div>
          <div class="text-sm opacity-75">Find Similar Nouns</div>
        </a>
        <a
          href="https://opensea.io/collection/nouns"
          target="_blank"
          rel="noopener noreferrer"
          class="block p-4 bg-green-600 text-white rounded-lg hover:bg-green-700 text-center"
        >
          <div class="text-2xl mb-2">🌊</div>
          <div class="font-semibold">OpenSea</div>
          <div class="text-sm opacity-75">Nouns Marketplace</div>
        </a>
      </div>
    </div>
  </div>
</Layout>