<!-- src/components/ui/toast/Toast.vue -->
<script lang="ts">
export const positions = {
  "top-left": "top-0 left-0",
  "top-center": "top-0 left-1/2 -translate-x-1/2",
  "top-right": "top-0 right-0",
  "bottom-left": "bottom-0 left-0",
  "bottom-center": "bottom-0 left-1/2 -translate-x-1/2",
  "bottom-right": "bottom-0 right-0",
}

export type ToastProps = {
  position?: keyof typeof positions
  class?: string
}
</script>

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

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

const computedPosition = computed(() => positions[position.value])
</script>

<template>
  <li
    :class="[
      'pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border border-slate-200 p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full bg-white dark:border-slate-800 dark:bg-slate-950',
      className,
    ]"
  >
    <slot />
  </li>
</template>
