<script setup lang="ts">
defineProps<{
  session: {
    id: string
    hostName: string
    protocol: 'ssh' | 'rdp'
    color: string | null
    active: boolean
  }
  isActive: boolean
}>()

const emit = defineEmits<{
  (e: 'activate'): void
  (e: 'close'): void
}>()
</script>

<template>
  <button
    @click="emit('activate')"
    class="flex items-center gap-2 px-3 h-full text-sm shrink-0 border-r border-gray-800 transition-colors"
    :class="isActive ? 'bg-gray-900 text-white' : 'bg-gray-950 text-gray-500 hover:text-gray-300 hover:bg-gray-900'"
  >
    <!-- Color dot -->
    <span
      class="w-2 h-2 rounded-full shrink-0"
      :style="session.color ? `background-color: ${session.color}` : ''"
      :class="!session.color ? 'bg-wraith-500' : ''"
    />
    <!-- Protocol badge -->
    <span
      class="text-xs font-mono uppercase px-1 rounded"
      :class="session.protocol === 'rdp' ? 'text-orange-400 bg-orange-950' : 'text-wraith-400 bg-wraith-950'"
    >{{ session.protocol }}</span>
    <!-- Host name -->
    <span class="max-w-[120px] truncate">{{ session.hostName }}</span>
    <!-- Close -->
    <button
      @click.stop="emit('close')"
      class="ml-1 text-gray-600 hover:text-red-400 text-xs leading-none"
      title="Close session"
    >&times;</button>
  </button>
</template>
