<template>
  <div class="h-6 flex items-center justify-between px-4 bg-[var(--wraith-bg-secondary)] border-t border-[var(--wraith-border)] text-[10px] text-[var(--wraith-text-muted)] shrink-0">
    <!-- Left: connection info -->
    <div class="flex items-center gap-3">
      <template v-if="sessionStore.activeSession">
        <span class="flex items-center gap-1">
          <span
            class="w-1.5 h-1.5 rounded-full"
            :class="sessionStore.activeSession.protocol === 'ssh' ? 'bg-[#3fb950]' : 'bg-[#1f6feb]'"
          />
          {{ sessionStore.activeSession.protocol.toUpperCase() }}
        </span>
        <span class="text-[var(--wraith-text-secondary)]">&middot;</span>
        <span>{{ connectionInfo }}</span>
      </template>
      <template v-else>
        <span>Ready</span>
      </template>
    </div>

    <!-- Right: terminal info -->
    <div class="flex items-center gap-3">
      <span>Theme: Dracula</span>
      <span>UTF-8</span>
      <span>120&times;40</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useSessionStore } from "@/stores/session.store";
import { useConnectionStore } from "@/stores/connection.store";

const sessionStore = useSessionStore();
const connectionStore = useConnectionStore();

const connectionInfo = computed(() => {
  const session = sessionStore.activeSession;
  if (!session) return "";

  const conn = connectionStore.connections.find((c) => c.id === session.connectionId);
  if (!conn) return session.name;

  return `root@${conn.hostname}:${conn.port}`;
});
</script>
