<script setup lang="ts">
import { onMounted } from 'vue';
import { usePushNotifications } from '@/Composables/usePushNotifications';

const { showPrompt, initPrompt, enable, dismiss } = usePushNotifications();

onMounted(() => {
    initPrompt();
});
</script>

<template>
    <v-snackbar
        v-model="showPrompt"
        :timeout="-1"
        location="bottom"
        color="surface"
        class="push-prompt"
    >
        <div class="d-flex align-center ga-3">
            <v-icon icon="mdi-bell-outline" />
            <span>Receive notifications for things that are important for you</span>
        </div>

        <template #actions>
            <v-btn variant="text" @click="dismiss">Not now</v-btn>
            <v-btn variant="text" color="primary" @click="enable">Enable</v-btn>
        </template>
    </v-snackbar>
</template>
