<template>
  <div class="p-6">
    <div class="mb-6">
      <h1 class="text-3xl font-bold">API Keys</h1>
      <p class="text-muted-foreground">Manage API keys for external integrations</p>
    </div>
    
    <div class="rounded-lg border bg-card">
      <div class="p-6">
        <EmptyState
          :icon="Key"
          title="No API keys"
          description="Create API keys to integrate external applications with the VFX system."
          action-text="Create API Key"
          @action="() => {}"
        />
      </div>
    </div>
  </div>
</template>

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