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

const sessions = useSessionStore()
</script>

<template>
  <div class="flex h-8 bg-gray-950 border-b border-gray-800 overflow-x-auto shrink-0">
    <!-- Home tab -->
    <button
      @click="sessions.goHome()"
      class="flex items-center gap-1.5 px-3 h-full text-sm shrink-0 border-r border-gray-800 transition-colors"
      :class="sessions.showHome ? 'bg-gray-900 text-white' : 'bg-gray-950 text-gray-500 hover:text-gray-300 hover:bg-gray-900'"
    >
      <svg class="w-3.5 h-3.5" viewBox="0 0 20 20" fill="currentColor"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" /></svg>
      <span>Home</span>
    </button>
    <!-- Session tabs -->
    <SessionTab
      v-for="session in sessions.sessions"
      :key="session.key"
      :session="session"
      :is-active="session.id === sessions.activeSessionId && !sessions.showHome"
      @activate="sessions.setActive(session.id)"
      @close="sessions.removeSession(session.id)"
    />
  </div>
</template>
