<script setup lang="ts">
import { usePage } from "@inertiajs/vue3";
import { computed } from "vue";
import { SharedProps } from "@/Types/types";

const page = usePage<SharedProps>().props;

const errors = computed(() => Object.values(page.errors ?? {}));
const success = computed(() => page.flash?.success);
</script>

<template>
    <div class="status-notifications">
        <TransitionGroup name="toast">
            <v-alert
                v-for="(error, i) in errors"
                :key="`error-${i}`"
                type="error"
                variant="flat"
                rounded="0"
                closable
                class="mb-2"
            >
                {{ error }}
            </v-alert>

            <v-alert
                v-if="success"
                key="success"
                type="success"
                variant="flat"
                rounded="0"
                closable
                class="mb-2"
            >
                {{ success }}
            </v-alert>
        </TransitionGroup>
    </div>
</template>

<style scoped>
.status-notifications {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: 360px;
}
</style>
