<template>
  <ul class="nav nav-pills flex-column">
    <TabNavigationItem
      icon="fas fa-eye"
      label="Aperçu"
      :is-active="activeTab === 'overview'"
      spacing=""
      @click="$emit('change-tab', 'overview')"
    />
    <TabNavigationItem
      icon="fas fa-info-circle"
      label="Informations"
      :is-active="activeTab === 'info'"
      @click="$emit('change-tab', 'info')"
    />
    <TabNavigationItem
      icon="fas fa-info-circle"
      label="Activités recentes"
      :is-active="activeTab === 'activity'"
      @click="$emit('change-tab', 'activity')"
    />
    <TabNavigationItem
      icon="fas fa-users"
      label="Contacts"
      :is-active="activeTab === 'contacts'"
      :badge="contactsCount > 0 ? contactsCount : null"
      @click="$emit('change-tab', 'contacts')"
    />
    <TabNavigationItem
      icon="fas fa-sticky-note"
      label="Notes"
      :is-active="activeTab === 'notes'"
      @click="$emit('change-tab', 'notes')"
    />
  </ul>
</template>

<script setup>
import TabNavigationItem from "@/components/atoms/client/TabNavigationItem.vue";

import { defineProps, defineEmits } from "vue";
defineProps({
  activeTab: {
    type: String,
    required: true,
  },
  contactsCount: {
    type: Number,
    default: 0,
  },
  locationsCount: {
    type: Number,
    default: 0,
  },
});

defineEmits(["change-tab"]);
</script>
