<script setup lang="ts">
import type { Alert } from '@/types';
import { computed, ref } from 'vue';
import { CircleX, CircleAlert, CircleCheck, Info } from '@lucide/vue';

const props = defineProps<{ alert: Alert }>();
const dismissed = ref<boolean>(false);
const visible = computed<boolean>(() => !dismissed.value && (new Date().getTime() - props.alert.created.getTime()) <= props.alert.seconds * 1000);

function onDismiss() {
    dismissed.value = true;
}
</script>

<template>
    <div v-if="visible" class="alert alert-info alert-soft cursor-pointer" :class="`alert-${alert.type}`" @click="onDismiss">
        <CircleX v-if="alert.type === 'error'" />
        <CircleAlert v-if="alert.type === 'warning'" />
        <CircleCheck v-if="alert.type === 'success'" />
        <Info v-if="alert.type === 'info'" />
        <span>{{ alert.message }}</span>
    </div>
</template>
