<template>
  <div class="flex-1 flex items-center justify-center bg-[var(--wraith-bg-primary)]">
    <div v-if="sessionStore.activeSession" class="text-center">
      <p class="text-[var(--wraith-text-secondary)] text-sm">
        Session: <span class="text-[var(--wraith-text-primary)]">{{ sessionStore.activeSession.name }}</span>
      </p>
      <p class="text-[var(--wraith-text-muted)] text-xs mt-1">
        {{ sessionStore.activeSession.protocol.toUpperCase() }} terminal will render here
      </p>
    </div>
    <div v-else class="text-center">
      <p class="text-[var(--wraith-text-muted)] text-sm">
        No active session
      </p>
      <p class="text-[var(--wraith-text-muted)] text-xs mt-1">
        Double-click a connection to start a session
      </p>
    </div>
  </div>
</template>

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

const sessionStore = useSessionStore();
</script>
