<script setup lang="ts">
import { AlertCircle, RefreshCw } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'

defineProps<{ title: string; message: string }>()
defineEmits<{ retry: [] }>()
</script>

<template>
  <div class="p-6 text-center">
    <AlertCircle class="h-12 w-12 mx-auto text-destructive mb-4" />
    <h3 class="text-lg font-semibold mb-2">{{ title }}</h3>
    <p class="text-muted-foreground mb-4">{{ message }}</p>
    <Button @click="$emit('retry')" variant="outline">
      <RefreshCw class="h-4 w-4 mr-2" />
      Try Again
    </Button>
  </div>
</template>
