<script setup lang="ts">
const { t } = useI18n()
</script>

<template>
  <div class="container mx-auto px-4 py-6">
    <!-- Welcome Section -->
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-foreground">Welcome back!</h1>
      <p class="mt-1 text-sm text-muted-foreground">Manage your digital assets securely</p>
    </div>

    <!-- Balance Card -->
    <div class="mb-6 rounded-xl bg-gradient-to-br from-primary to-accent p-6 text-primary-foreground shadow-lg">
      <p class="text-sm opacity-90">Total Portfolio Value</p>
      <p class="mt-2 text-4xl font-bold">$0.00</p>
      <div class="mt-4 flex gap-2">
        <Button variant="secondary" size="sm" class="flex-1">Send</Button>
        <Button variant="secondary" size="sm" class="flex-1">Receive</Button>
      </div>
    </div>

    <!-- Quick Actions -->
    <div class="mb-6">
      <h2 class="mb-3 text-lg font-semibold text-foreground">Quick Actions</h2>
      <div class="grid grid-cols-2 gap-3">
        <button class="rounded-lg border border-border bg-card p-4 text-left transition-colors hover:bg-accent">
          <div class="mb-2 text-2xl">💸</div>
          <p class="font-medium text-foreground">Send</p>
          <p class="text-xs text-muted-foreground">Transfer assets</p>
        </button>
        <button class="rounded-lg border border-border bg-card p-4 text-left transition-colors hover:bg-accent">
          <div class="mb-2 text-2xl">📥</div>
          <p class="font-medium text-foreground">Receive</p>
          <p class="text-xs text-muted-foreground">Get payment</p>
        </button>
        <button class="rounded-lg border border-border bg-card p-4 text-left transition-colors hover:bg-accent">
          <div class="mb-2 text-2xl">🔄</div>
          <p class="font-medium text-foreground">Swap</p>
          <p class="text-xs text-muted-foreground">Exchange tokens</p>
        </button>
        <button class="rounded-lg border border-border bg-card p-4 text-left transition-colors hover:bg-accent">
          <div class="mb-2 text-2xl">📊</div>
          <p class="font-medium text-foreground">Analytics</p>
          <p class="text-xs text-muted-foreground">View insights</p>
        </button>
      </div>
    </div>

    <!-- Recent Activity -->
    <div>
      <h2 class="mb-3 text-lg font-semibold text-foreground">Recent Activity</h2>
      <div class="rounded-lg border border-border bg-card p-6 text-center">
        <p class="text-sm text-muted-foreground">No recent activity</p>
        <p class="mt-1 text-xs text-muted-foreground">Your transactions will appear here</p>
      </div>
    </div>
  </div>
</template>

