<template>
  <div class="flex border-b border-[var(--wraith-border)]">
    <button
      v-for="tab in tabs"
      :key="tab.id"
      class="flex-1 py-2 text-xs font-medium text-center transition-colors cursor-pointer"
      :class="
        activeTab === tab.id
          ? 'text-[var(--wraith-accent-blue)] border-b-2 border-[var(--wraith-accent-blue)]'
          : 'text-[var(--wraith-text-muted)] hover:text-[var(--wraith-text-secondary)]'
      "
      @click="activeTab = tab.id"
    >
      {{ tab.label }}
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const tabs = [
  { id: "connections", label: "Connections" },
  { id: "sftp", label: "SFTP" },
] as const;

const activeTab = ref<"connections" | "sftp">("connections");
</script>
