<template>
  <v-snackbar
    v-model="modelValue"
    variant="flat"
    class="pb-4"
  >
    <v-icon
      class="minsk-500 pr-3"
      icon="check_circle"
      size="large"
    />
    <span class="shark-950 text-center text-sm-medium">
      {{ t('texts.annotationGeneratedSuccess') }}
    </span>
    <template #actions>
      <v-btn
        data-testid="undoBtn"
        class="mr-2 px-4 ml-auto"
        color="minsk_900"
        variant="flat"
        @click="undo"
      >
        <span>{{ t('labels.undo') }}</span>
      </v-btn>
      <v-icon
        data-testid="closeBtn"
        class="ml-auto mr-3 shark-400"
        size="small"
        icon="close"
        @click="modelValue = false"
      />
    </template>
  </v-snackbar>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const modelValue = defineModel<boolean>({ default: false });

function undo(): void {
  // TODO: implement
  modelValue.value = false;
}

defineExpose({ modelValue, undo });
</script>
