<template>
  <div class="p-6">
    <div class="mb-6">
      <h1 class="text-3xl font-bold">Usage Analytics</h1>
      <p class="text-muted-foreground">API usage statistics and integration monitoring</p>
    </div>
    
    <div class="rounded-lg border bg-card">
      <div class="p-6">
        <EmptyState
          :icon="BarChart3"
          title="No usage data"
          description="API usage analytics will appear here when API keys are used."
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { BarChart3 } from 'lucide-vue-next'
import EmptyState from '@/components/ui/empty/EmptyState.vue'
</script>