veza/apps/web/src/components/BulkModeBanner.tsx

import { X, CheckSquare } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';

/**
 * BulkModeBannerProps - Propriétés du composant BulkModeBanner
 */
export interface BulkModeBannerProps {
  /**
   * Si true, le banner est affiché
   */
  isActive: boolean;

  /**
   * Nombre d'éléments sélectionnés
   */
  selectedCount: number;

  /**
   * Fonction appelée lors du clic sur le bouton de fermeture
   * Doit désactiver le mode bulk et réinitialiser la sélection
   */
  onClose: () => void;

  /**
   * Classes CSS personnalisées
   */
  className?: string;
}

/**
 * BulkModeBanner - Banner pour le mode sélection multiple
 *
 * Affiche un banner informatif lorsque le mode bulk est actif,
 * montrant le nombre d'éléments sélectionnés et permettant
 * de fermer le mode bulk.
 *
 * @example
 * ```tsx
 * <BulkModeBanner
 *   isActive={isBulkMode}
 *   selectedCount={selectedTracks.size}
 *   onClose={() => {
 *     setIsBulkMode(false);
 *     setSelectedTracks(new Set());
 *   }}
 * />
 * ```
 *
 * @component
 * @param {BulkModeBannerProps} props - Propriétés du composant
 * @returns {JSX.Element | null} Banner ou null si isActive est false
 */
export function BulkModeBanner({
  isActive,
  selectedCount,
  onClose,
  className,
}: BulkModeBannerProps) {
  if (!isActive || selectedCount === 0) {
    return null;
  }

  const itemText =
    selectedCount === 1 ? 'élément sélectionné' : 'éléments sélectionnés';

  return (
    <div
      role="status"
      aria-live="polite"
      aria-atomic="true"
      className={cn(
        'w-full bg-muted/10 shadow-[0_2px_6px_-2px_rgba(26,26,30,0.08)] text-muted-foreground',
        'px-4 py-4 flex items-center justify-between gap-4',
        'transition-all duration-[var(--sumi-duration-normal)]',
        className,
      )}
    >
      <div className="flex items-center gap-4 flex-1 min-w-0">
        <CheckSquare className="w-5 h-5 flex-shrink-0" aria-hidden="true" />
        <span className="text-sm font-medium">
          <span className="font-bold">{selectedCount}</span> {itemText}
        </span>
      </div>
      <Button
        variant="ghost"
        size="sm"
        onClick={onClose}
        className="text-muted-foreground hover:text-foreground hover:bg-white/5 h-auto py-1 px-2 flex-shrink-0"
        aria-label="Fermer le mode sélection"
      >
        <X className="w-4 h-4" />
      </Button>
    </div>
  );
}