'use client'

import { useStaffOrgSelection } from '@/hooks/useStaffOrgSelection'
import { Building2, X } from 'lucide-react'

/**
 * Badge affichant l'organisation actuellement sélectionnée par le staff
 * 
 * Fonctionnalités :
 * - Affiche le nom de l'organisation active
 * - Bouton pour réinitialiser (retour à "Toutes les organisations")
 * - Masqué automatiquement si aucune organisation n'est sélectionnée
 * - Uniquement visible pour le staff
 * 
 * Placement : Dans la sidebar, sous "Votre structure" et "Niveau d'accès"
 */
export function StaffOrgBadge() {
  const { selectedOrgName, clearSelection } = useStaffOrgSelection()
  
  // Ne rien afficher si aucune organisation n'est sélectionnée
  if (!selectedOrgName) {
    return null
  }
  
  return (
    <div className="flex items-center gap-2 px-3 py-2 bg-indigo-50 border border-indigo-200 rounded-lg">
      <Building2 className="w-4 h-4 text-indigo-600 flex-shrink-0" />
      <div className="flex-1 min-w-0">
        <div className="text-xs text-indigo-600 font-medium">Orga active</div>
        <div className="text-sm font-semibold text-indigo-900 truncate" title={selectedOrgName}>
          {selectedOrgName}
        </div>
      </div>
      <button
        onClick={clearSelection}
        className="flex-shrink-0 p-1 text-indigo-400 hover:text-indigo-600 hover:bg-indigo-100 rounded transition-colors"
        title="Voir toutes les organisations"
        aria-label="Réinitialiser la sélection"
      >
        <X className="w-4 h-4" />
      </button>
    </div>
  )
}
