<template>
  <div class="border-b border-gray-200 bg-white">
    <nav class="flex space-x-1 overflow-x-auto">
      <button
        v-for="file in files"
        :key="file.id"
        @click="$emit('file-selected', file)"
        :class="[
          'px-4 py-2 text-sm font-medium whitespace-nowrap',
          file.id === activeFile?.id
            ? 'border-b-2 border-blue-500 text-blue-600'
            : 'text-gray-500 hover:text-gray-700'
        ]"
      >
        {{ file.name }}
      </button>
    </nav>
  </div>
</template>

<script setup lang="ts">
import type { OrgFile } from '@/types/org'

defineProps<{
  files: OrgFile[]
  activeFile: OrgFile | null
}>()

defineEmits<{
  'file-selected': [file: OrgFile]
}>()
</script>