<script setup lang="ts">
import { useOnline } from "@vueuse/core";

const online = useOnline();
</script>

<template>
  <div
    v-if="!online"
    class="pointer-events-none fixed inset-0 z-40 flex items-end"
  >
    <div
      class="bg-surface-background flex h-[5%] w-full items-center justify-center p-6 text-center"
    >
      <div>
        <ClientOnly>
          <Lottie
            name="no-internet"
            :height="50"
            :width="50"
            class="inline-block"
          />
        </ClientOnly>
      </div>
      <p class="text-xl font-bold">
        {{ $t("noInternet.title") }}
      </p>
    </div>
  </div>
</template>
