<!-- src/components/ui/toast/ToastViewport.vue -->
<script lang="ts">
import { positions, type ToastProps } from "./Toast.vue"
</script>

<script setup lang="ts">
import { toRefs } from "vue"

const props = withDefaults(defineProps<ToastProps>(), {
  position: "bottom-right",
})
const { position, class: className } = toRefs(props)
</script>

<template>
  <ol
    :class="[
      'fixed z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:flex-col md:max-w-[420px] gap-2',
      positions[position],
      className,
    ]"
  >
    <slot />
  </ol>
</template>
