<script setup lang="ts">

import Dialog from "@/components/dialog/Dialog.vue";
import type {DialogControls} from "@/components/dialog/dialog";

interface AlertDialogProps extends DialogControls {
    title: string,
    text: string,
    positive: string,
    icon?: string
}

const props = defineProps<AlertDialogProps>()

</script>

<template>

    <Dialog class="dialog">
        <h3 style="margin-bottom: 10px"><i v-if="icon">{{icon}}</i>{{title}}</h3>
        <p>{{text}}</p>
        <div class="buttons" style="display: flex; justify-content: end; margin-top: 20px;">
            <button @click="onPositive" colored>{{positive}}</button>
        </div>
    </Dialog>

</template>

<style scoped lang="less">

.dialog {
    display: flex;
    flex-direction: column;
    width: 500px
}

</style>