<script setup lang="ts">
import { computed } from 'vue'
import { useCanvasStore } from '../stores/canvas'

const canvasStore = useCanvasStore()

const statusText = computed(() => {
  return canvasStore.isConnected ? 'Conectado' : 'Desconectado'
})

const statusClass = computed(() => {
  return canvasStore.isConnected ? 'connected' : 'disconnected'
})
</script>

<template>
  <div class="status-bar">
    <div class="status-indicator" :class="statusClass">
      <span class="status-dot"></span>
      <span class="status-text">{{ statusText }}</span>
    </div>
  </div>
</template>

<style scoped>
.status-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-indicator.connected {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.status-indicator.connected .status-dot {
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}

.status-indicator.disconnected {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.status-indicator.disconnected .status-dot {
  background: #ef4444;
}
</style>
