<script lang="ts" setup>
import { Toaster as Sonner } from 'vue-sonner'
import { computed } from 'vue'
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()

const theme = computed(() => (appStore.isDarkMode ? 'dark' : 'light'))
</script>

<template>
  <Sonner
    :theme="theme"
    position="bottom-center"
    class="toaster group"
    style="z-index: 9999"
    :toast-options="{
      classes: {
        toast:
          'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
        description: 'group-[.toast]:text-muted-foreground',
        actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
        cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
      },
    }"
  />
</template>
