<template>
  <UModal :open="open" :title="$t('versions.restoreTitle')" @update:open="$emit('update:open', $event)">
    <template #body>
      <div class="space-y-2">
        <p>
          {{ $t('versions.restoreConfirm', { number: versionNumber }) }}
        </p>
        <p class="text-sm text-gray-600">
          {{ $t('versions.restoreDescription') }}
        </p>
      </div>
    </template>
    <template #footer>
      <UButton :label="$t('common.cancel')" color="neutral" variant="outline" @click="$emit('update:open', false)" />
      <UButton :label="$t('versions.restore')" color="primary" :loading="loading" @click="$emit('confirm')" />
    </template>
  </UModal>
</template>

<script setup lang="ts">
defineProps<{
  open: boolean
  versionNumber: number
  loading?: boolean
}>()

defineEmits<{
  (e: 'update:open', value: boolean): void
  (e: 'confirm'): void
}>()
</script>
