<template>
  <Transition name="offline-slide">
    <div v-if="!online" class="offline-banner">
      <i class="ph ph-wifi-slash"></i>
      <span>Нет сети — интерфейс открыт из кэша, сообщения не отправляются</span>
    </div>
  </Transition>
</template>

<script setup>
import { useOnline } from '@/composables/useOnline'

const { online } = useOnline()
</script>

<style lang="scss" scoped>
@use 'kit-deps' as *;

.offline-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: $space-sm;
  padding: $space-xs $space-md;
  background: rgba($color-orange, 0.15);
  color: $color-orange;
  font-size: 12px;
  border-bottom: 1px solid rgba($color-orange, 0.3);

  i {
    font-size: 16px;
    flex-shrink: 0;
  }
}

.offline-slide-enter-active,
.offline-slide-leave-active {
  transition: max-height 0.25s ease, opacity 0.25s ease;
  overflow: hidden;
}
.offline-slide-enter-from,
.offline-slide-leave-to {
  max-height: 0;
  opacity: 0;
}
.offline-slide-enter-to,
.offline-slide-leave-from {
  max-height: 48px;
  opacity: 1;
}
</style>