<script setup lang="ts">
import { useUiStore } from "../stores/ui";

const ui = useUiStore();
</script>

<template>
  <Transition
    enter-active-class="transition duration-150"
    enter-from-class="translate-y-2 opacity-0"
    leave-active-class="transition duration-150"
    leave-to-class="translate-y-2 opacity-0"
  >
    <div
      v-if="ui.toast"
      class="fixed bottom-4 left-1/2 z-50 flex -translate-x-1/2 items-center gap-3 rounded-lg bg-neutral-900 px-4 py-2.5 text-sm text-white shadow-lg dark:bg-neutral-100 dark:text-neutral-900"
      role="status"
      aria-live="polite"
    >
      <span>{{ ui.toast.message }}</span>
      <button
        v-if="ui.toast.action"
        type="button"
        class="font-semibold text-brand hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-brand"
        @click="ui.runToastAction()"
      >
        {{ ui.toast.action.label }}
      </button>
      <button
        type="button"
        class="text-white/60 hover:text-white dark:text-neutral-900/60 dark:hover:text-neutral-900"
        aria-label="Dismiss"
        @click="ui.dismissToast()"
      >
        ×
      </button>
    </div>
  </Transition>
</template>
