<template>
  <div class="updater-app">
    <p v-if="checking">
      Checking updates...
    </p>
    <p v-else-if="!!lastUpdate">
      Update available: {{ lastUpdate.version }}
    </p>
  </div>
</template>

<script setup lang="ts">
import { useUpdater } from '@shared/composables/use-updater'

const { checking, lastUpdate } = useUpdater()
</script>

<style lang="scss">
.updater-app {
  display: flex;
  height: 100%;

  > p {
    @include font-body-bold;

    margin: auto;
    padding: var(--space-2) var(--space-3);
    background-color: var(--paper);
    outline: var(--border-w) solid var(--ink);
    outline-offset: calc(var(--border-w) * -1);
    box-shadow: var(--shadow);
  }
}
</style>
