<template>
  <q-card bordered class="row q-ma-xs q-pa-xs" style="position: relative">
    <div class="col-12 text-weight-light">{{ dateString }}</div>
    <div class="col-12">{{ modelValue.text }}</div>
    <q-btn
      round
      dense
      icon="close"
      size="sm"
      color="negative"
      class="q-ma-xs"
      style="position: absolute; top: 0; right: 0"
      @click="remove"
    />
  </q-card>
</template>

<script lang="ts">
import { defineComponent, PropType, computed } from 'vue';
import { formatDateTime } from 'src/utils/datetime';

export default defineComponent({
  name: 'Notification',
  props: {
    modelValue: {
      required: true,
      type: Object as PropType<FG.Notification>,
    },
  },
  emits: {
    remove: (id: number) => !!id,
  },
  setup(props, { emit }) {
    const dateString = computed(() => formatDateTime(props.modelValue.time, true, true));

    function remove() {
      emit('remove', props.modelValue.id);
    }

    return { dateString, remove };
  },
});
</script>

<style scoped></style>