<template>
    <div class="h-14 flex items-center justify-center shadow-gray-400 border-b-2">
      <span class="text-base ">{{title}}</span>
      <div class="h-3.5 w-3.5 rounded-full ml-4 " :class="[isConnection ? 'bg-green-500 online-status' : 'bg-red-500']"></div>
    </div>
</template>

<script setup lang="ts">
import  {ref} from 'vue'
const title = import.meta.env.VITE_APP_TITLE;
const isConnection = ref(false)

const changeOnlineStatus = (status: boolean) => {
  isConnection.value = status
}

defineExpose({
  changeOnlineStatus
})

</script>

<style>

.online-status {
  animation: blink 3s ease-in-out infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
</style>