<script setup lang="ts">
const props = defineProps({
  modal: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
  desc: {
    type: String,
    default: "",
  },
  clickClose: {
    type: Function
  }
});
</script>

<template>
  <q-dialog v-model="props.modal" persistent>
    <q-card style="width: 500px; max-width: 500px">
      <q-toolbar class="q-py-md">
        <q-toolbar-title class="header-text">{{ props.title }}</q-toolbar-title>
        <q-btn icon="close" unelevated round dense @click="clickClose" style="color: #ff8080; background-color: #ffdede" />
      </q-toolbar>

      <q-separator />
      <q-card-section class="q-p-sm">
        <div class="row col-12">
          {{ props.desc }}
        </div>
      </q-card-section>
      <q-separator />
    </q-card>
  </q-dialog>
</template>