<script setup lang="ts">
import { ref, onMounted } from 'vue'
import AppIcon from '@/components/ui/AppIcon.vue'

const props = defineProps<{
  message: string
  type?: 'success' | 'error' | 'info'
  duration?: number
}>()
const emit = defineEmits<{ close: [] }>()
const visible = ref(false)

onMounted(() => {
  requestAnimationFrame(() => {
    visible.value = true
  })
  setTimeout(() => {
    visible.value = false
    setTimeout(() => emit('close'), 350)
  }, props.duration ?? 3000)
})

const iconNameMap = { success: 'circle-check', error: 'circle-x', info: 'info-circle' } as const
</script>

<template>
  <Transition name="toast">
    <div v-if="visible" class="toast" :class="type ?? 'success'">
      <AppIcon :icon="iconNameMap[type ?? 'success']" :size="18" />
      <span>{{ message }}</span>
      <button class="toast-close" @click="emit('close')">×</button>
    </div>
  </Transition>
</template>

<style scoped>
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 32px var(--color-black-a15);
  pointer-events: all;
  max-width: 340px;
}
.success {
  background: var(--color-success-bg-a95);
  border: 1px solid var(--color-primary-light);
  color: var(--color-success-text);
}
.error {
  background: var(--color-danger-bg-a95);
  border: 1px solid var(--color-danger-light);
  color: var(--color-danger-text);
}
.info {
  background: var(--color-info-bg-a95);
  border: 1px solid var(--color-info-border);
  color: var(--color-info-text);
}
.toast-close {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.6;
}
.toast-close:hover {
  opacity: 1;
}
.toast-enter-active,
.toast-leave-active {
  transition: all 0.35s ease;
}
.toast-enter-from {
  opacity: 0;
  transform: translateY(20px);
}
.toast-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style>
