<script setup lang="ts">
import { useRouter } from 'vue-router'
import ModalDialog from './ModalDialog.vue'

defineProps<{
  modelValue?: boolean
}>()

const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
const router = useRouter()

function close() {
  emit('update:modelValue', false)
}

function openMyLectures() {
  close()
  router.push('/my-lectures')
}
</script>

<template>
  <ModalDialog
    :model-value="modelValue"
    title="Лимит записей достигнут"
    icon="alert-triangle"
    size="sm"
    @update:model-value="emit('update:modelValue', $event)"
  >
    <p>
      Все доступные слоты записи уже заняты. Чтобы записаться на новую лекцию, отмените одну из
      текущих записей или повысьте уровень.
    </p>
    <template #footer>
      <button class="btn-secondary" type="button" @click="close">Понятно</button>
      <button class="btn-primary" type="button" @click="openMyLectures">Мои записи</button>
    </template>
  </ModalDialog>
</template>
