<script setup lang="ts">
// 프로젝트 서브탭 — 업무/멤버/활동/설정
import { RouterLink } from 'vue-router'

interface Props {
  projectId: string
  active: 'tasks' | 'members' | 'activity' | 'settings'
  taskCount: number
  memberCount: number
  /** 설정 탭 노출 여부(관리자만). 기본 false — 권한이 확인된 경우에만 노출 */
  canManage?: boolean
}
defineProps<Props>()
</script>

<template>
  <nav class="tabs">
    <RouterLink
      :to="`/projects/${projectId}`"
      :class="{ active: active === 'tasks' }"
    >
      <span class="tb-label">업무</span> <span class="tb-count">{{ taskCount }}</span>
    </RouterLink>
    <RouterLink
      :to="`/projects/${projectId}/members`"
      :class="{ active: active === 'members' }"
    >
      <span class="tb-label">멤버</span> <span class="tb-count">{{ memberCount }}</span>
    </RouterLink>
    <RouterLink
      :to="`/projects/${projectId}/activity`"
      :class="{ active: active === 'activity' }"
    >
      <span class="tb-label">활동</span>
    </RouterLink>
    <RouterLink
      v-if="canManage"
      :to="`/projects/${projectId}/settings`"
      :class="{ active: active === 'settings' }"
    >
      <span class="tb-label">설정</span>
    </RouterLink>
  </nav>
</template>

<style scoped>
.tabs {
  display: flex;
  gap: 0.125rem;
  border-bottom: 1px solid var(--border);
  margin: 1.25rem 0 1.125rem;
}
.tabs a {
  padding: 0.625rem 0.875rem;
  font-size: 0.844rem;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}
.tabs a:hover {
  color: var(--text);
}
.tabs a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tabs a .tb-count {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-2);
  background: #f1f2f4;
  border-radius: 20px;
  padding: 0 0.4375rem;
  height: 1.0625rem;
  min-width: 1.0625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.tabs a.active .tb-count {
  background: var(--accent-weak);
  color: var(--accent);
}
</style>
