<script setup>
import Modal from '@/components/ui/Modal.vue'
import Button from '@/components/ui/Button.vue'
import Badge from '@/components/ui/Badge.vue'
import { alertTypeLabel } from '@/api/normalize'

defineProps({
  open: { type: Boolean, default: false },
  alert: { type: Object, default: null },
})

const emit = defineEmits(['confirm', 'close'])

function severityVariant(severity) {
  return severity === 'Critical' ? 'critical' : 'warning'
}
</script>

<template>
  <Modal :open="open" title="Acknowledge Alert" @close="emit('close')">
    <div v-if="alert" class="space-y-4">
      <div class="flex flex-wrap items-center gap-2">
        <Badge :variant="severityVariant(alert.severity)">{{ alert.severity }}</Badge>
        <span class="text-sm font-medium text-gray-900 dark:text-white">
          {{ alertTypeLabel(alert.alertType) }}
        </span>
      </div>
      <p v-if="alert.details" class="text-sm text-gray-600 dark:text-gray-400">
        {{ alert.details }}
      </p>
      <p class="text-sm text-gray-500 dark:text-gray-400">
        Confirm that you have reviewed this alert.
      </p>
      <div class="flex justify-end gap-2">
        <Button variant="ghost" @click="emit('close')">Cancel</Button>
        <Button variant="primary" @click="emit('confirm')">Acknowledge</Button>
      </div>
    </div>
  </Modal>
</template>
