<script setup lang="ts">
import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
import type { BreadcrumbItem } from '@/types';
import { usePushNotifications } from '@/composables/usePushNotifications';
import { computed } from 'vue';
import { usePage } from '@inertiajs/vue3';

const props = defineProps<{
    breadcrumbs?: BreadcrumbItem[];
}>();

const resolvedBreadcrumbs = computed(() => {
    return props.breadcrumbs || (usePage().props.breadcrumbs as BreadcrumbItem[]) || [];
});

const { isSubscribed, subscribe, unsubscribe } = usePushNotifications();
</script>

<template>
    <AppLayout :breadcrumbs="resolvedBreadcrumbs">
        <slot />
        <div class="fixed bottom-4 right-4">
            <button
                @click="isSubscribed ? unsubscribe() : subscribe()"
                class="rounded-full bg-blue-500 px-4 py-2 text-white"
            >
                {{ isSubscribed ? 'Unsubscribe' : 'Subscribe' }}
            </button>
        </div>
    </AppLayout>
</template>
