<template>
  <v-snackbar
    v-model="toast.show"
    :color="toast.color"
    :timeout="toast.timeout"
    location="top"
    variant="flat"
  >
    <div class="d-flex align-center">
      <v-icon v-if="toast.color === 'success'" class="mr-2">mdi-check-circle</v-icon>
      <v-icon v-else-if="toast.color === 'error'" class="mr-2">mdi-alert-circle</v-icon>
      <v-icon v-else-if="toast.color === 'warning'" class="mr-2">mdi-alert</v-icon>
      <v-icon v-else-if="toast.color === 'info'" class="mr-2">mdi-information</v-icon>
      <span>{{ toast.message }}</span>
    </div>
    <template v-slot:actions>
      <v-btn
        variant="text"
        @click="toast.show = false"
      >
        Close
      </v-btn>
    </template>
  </v-snackbar>
</template>

<script setup lang="ts">
import { useToast } from '~/composables/useToast'

const { toast } = useToast()
</script>
