<template>
  <div class="flex items-center bg-[var(--wraith-bg-secondary)] border-b border-[var(--wraith-border)] h-9 shrink-0">
    <!-- Tabs -->
    <div class="flex items-center overflow-x-auto min-w-0">
      <button
        v-for="session in sessionStore.sessions"
        :key="session.id"
        class="group flex items-center gap-2 px-3 h-9 text-xs whitespace-nowrap border-r border-[var(--wraith-border)] transition-all duration-500 cursor-pointer shrink-0"
        :class="
          session.id === sessionStore.activeSessionId
            ? 'bg-[var(--wraith-bg-primary)] text-[var(--wraith-text-primary)] border-b-2 border-b-[var(--wraith-accent-blue)]'
            : 'text-[var(--wraith-text-muted)] hover:text-[var(--wraith-text-secondary)] hover:bg-[var(--wraith-bg-tertiary)]'
        "
        @click="sessionStore.activateSession(session.id)"
      >
        <!-- Protocol dot -->
        <span
          class="w-2 h-2 rounded-full shrink-0"
          :class="session.protocol === 'ssh' ? 'bg-[#3fb950]' : 'bg-[#1f6feb]'"
        />

        <span>{{ session.name }}</span>

        <!-- Close button -->
        <span
          class="ml-1 opacity-0 group-hover:opacity-100 hover:text-[var(--wraith-accent-red)] transition-opacity"
          @click.stop="sessionStore.closeSession(session.id)"
        >
          &times;
        </span>
      </button>
    </div>

    <!-- New tab button -->
    <button
      class="flex items-center justify-center w-9 h-9 text-[var(--wraith-text-muted)] hover:text-[var(--wraith-text-primary)] hover:bg-[var(--wraith-bg-tertiary)] transition-colors cursor-pointer shrink-0"
      title="New session"
    >
      +
    </button>
  </div>
</template>

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

const sessionStore = useSessionStore();
</script>
