<template>
  <div
    class="card border-0 shadow-lg rounded-xl h-100 sidebar-card"
    :class="{ collapsed: isCollapsed }"
  >
    <div class="card-header bg-white border-0 pb-0">
      <div class="d-flex align-items-center justify-content-between mb-3">
        <div class="d-flex align-items-center gap-2">
          <i class="fas fa-users text-indigo-600"></i>
          <h3 class="text-xs font-semibold mb-0">
            👥 Collaborateurs ({{ count }})
          </h3>
        </div>
      </div>
    </div>
    <div class="card-body pt-0">
      <div v-if="count === 0" class="text-center text-secondary py-4 text-xs">
        <p class="mb-2">Aucun collaborateur</p>
        <p class="text-muted opacity-60">
          💡 Allouez une couleur depuis la page Salariés
        </p>
      </div>
      <slot v-else></slot>
    </div>

    <!-- Toggle bit for mobile if needed, though we handle collapse in template -->
  </div>
</template>

<script setup>
import { defineProps } from "vue";

defineProps({
  count: {
    type: Number,
    default: 0,
  },
  isCollapsed: {
    type: Boolean,
    default: false,
  },
});
</script>

<style scoped>
.sidebar-card {
  border-radius: 0.75rem;
  background-color: white;
  border: 2px solid #e0e7ff; /* border-indigo-200 */
}

.text-xs {
  font-size: 0.75rem;
}

.font-semibold {
  font-weight: 600;
}

.text-indigo-600 {
  color: #4f46e5;
}

.sidebar-card {
  transition: all 0.3s ease;
}

@media (max-width: 767.98px) {
  .sidebar-card.collapsed {
    width: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: none;
  }
}
</style>
