<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="
        modelValue === 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="emit('update:modelValue', tab.id)"
    >
      {{ tab.label }}
    </button>
  </div>
</template>

<script setup lang="ts">
export type SidebarTab = "connections" | "sftp";

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

defineProps<{
  modelValue: SidebarTab;
}>();

const emit = defineEmits<{
  "update:modelValue": [tab: SidebarTab];
}>();
</script>
