<script lang="ts" setup>
const emit = defineEmits(["close", "validate"]);
defineProps({
  visible: Boolean
});
</script>
<template>
  <div :class="`modal${visible ? ' visible' : ''}`">
    <section class="modal-content">
      <header class="modal-content-header">
        <h1>Conditions Générales d’Utilisation de la Boussole PLUSS</h1>
        <button class="close_modal" @click="$emit('close')">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.6 16L0 14.4L6.4 8L0 1.6L1.6 0L8 6.4L14.4 0L16 1.6L9.6 8L16 14.4L14.4 16L8 9.6L1.6 16Z"
                  fill="#1C1B1F"/>
          </svg>
          <span>Fermer</span>
        </button>
      </header>
      <main class="modal-content-body">
        <cgu />
      </main>
      <footer class="modal-content-footer">
        <button class="button orange" @click="emit('validate')">Accepter</button>
      </footer>
    </section>
    <div class="modal-overlay" @click="$emit('close')"></div>
  </div>
</template>
<style scoped lang="scss">
@import "assets/css/modal";
</style>
