<template>
  <div class="rounded-lg border border-destructive/50 bg-destructive/10 p-4">
    <div class="flex items-start gap-3">
      <AlertCircle class="h-5 w-5 text-destructive mt-0.5 flex-shrink-0" />
      <div class="flex-1">
        <h3 v-if="title" class="font-semibold text-destructive mb-1">{{ title }}</h3>
        <p class="text-sm text-destructive/90">{{ message }}</p>
        <Button 
          v-if="retry" 
          @click="$emit('retry')" 
          variant="outline" 
          size="sm" 
          class="mt-3"
        >
          Try Again
        </Button>
      </div>
    </div>
  </div>
</template>

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

interface Props {
  title?: string
  message: string
  retry?: boolean
}

defineProps<Props>()
defineEmits<{
  retry: []
}>()
</script>