<script setup lang="ts">
const emit = defineEmits<{ close: [] }>();

const app = useAppStore();

const keep3d = () => {
  app.lagDetected = false;
  emit("close");
};

const switch2d = () => {
  app.setRenderingMode("2d");
  emit("close");
};
</script>

<template>
  <UModal :open="true" :dismissible="false" :title="$t('lagModal.title')" :ui="{ footer: 'justify-end' }">
    <template #body>
      {{ $t('lagModal.body') }}
    </template>

    <template #footer>
      <UButton variant="ghost" color="neutral" :label="$t('lagModal.keep3d')" @click="keep3d" />
      <UButton color="neutral" :label="$t('lagModal.switch2d')" @click="switch2d" />
    </template>
  </UModal>
</template>
