<template>
  <UiModale :modalActive="modelValue"
  @close="emit('update:modelValue', false)"
  title="Confirmer le changement d’email">
    <div class="modale-content">

      <p>
        Un email de validation va être envoyé à la nouvelle adresse.
        Le changement ne sera effectif qu’après confirmation.
      </p>

      <div class="actions">
        <button class="btn danger" @click="confirm">Confirmer</button>
        <button class="btn" @click="emit('update:modelValue', false)">Annuler</button>
      </div>
    </div>
  </UiModale>
</template>

<script setup lang="ts">
const props = defineProps<{
  modelValue: boolean
}>()

const emit = defineEmits(['update:modelValue', 'confirm'])

function confirm() {
  emit('confirm')
  emit('update:modelValue', false)
}
</script>
