<script setup>

const props = defineProps({
  active: {
    type: Boolean,
    default: false
  },
  href: {
    type: String,
    default: ''
  },
  label: {
    type: String,
    default: ''
  },
});

</script>

<template>
  <Transition name="pankow-roll-down">
    <a class="pankow-offline-banner" v-show="active" :href="href" target="_blank">
      <i class="fa fa-solid fa-spin fa-circle-notch"/> {{ label }}
    </a>
  </Transition>
</template>

<style>

.pankow-offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30000;
  background-color: #ff4c4c;
  width: 100%;
  padding: 2px;
  text-align: center;
  color: white;
}

.pankow-offline-banner:hover, .pankow-offline-banner:focus {
  color: white;
  text-decoration: none;
}

</style>