/**
 * Groupe de boutons d'action avec animations et espacement optimisé
 */

import React from 'react';
import ActionButton from './ActionButton';
import { ActionButtonType } from './ActionButtonStyles';
import { ChantierActif } from '../../hooks/useDashboard';

interface ActionButtonGroupProps {
  chantier: ChantierActif;
  actions: ActionButtonType[];
  onAction: (action: ActionButtonType, chantier: ChantierActif) => void;
  size?: 'xs' | 'sm' | 'md' | 'lg';
  orientation?: 'horizontal' | 'vertical';
  spacing?: 'none' | 'sm' | 'md' | 'lg';
  showLabels?: boolean;
  className?: string;
}

const ActionButtonGroup: React.FC<ActionButtonGroupProps> = ({
  chantier,
  actions,
  onAction,
  size = 'md',
  orientation = 'horizontal',
  spacing = 'sm',
  showLabels = false,
  className = ''
}) => {
  // Classes pour l'espacement - plus compact
  const spacingClasses = {
    none: 'gap-0',
    sm: 'gap-1',
    md: 'gap-1',
    lg: 'gap-2'
  };

  // Classes pour l'orientation
  const orientationClasses = {
    horizontal: 'flex-row',
    vertical: 'flex-column'
  };

  const containerClasses = [
    'flex',
    'align-items-center',
    orientationClasses[orientation],
    spacingClasses[spacing],
    'action-button-group',
    className
  ].filter(Boolean).join(' ');

  return (
    <div className={containerClasses}>
      {actions.map((actionType, index) => (
        <ActionButton
          key={`${actionType}-${chantier.id}-${index}`}
          type={actionType}
          size={size}
          showLabel={showLabels}
          onClick={() => onAction(actionType, chantier)}
          className="action-button-group-item"
          // Props pour le menu
          chantier={chantier}
          onMenuAction={actionType === 'MENU' ? onAction : undefined}
        />
      ))}
    </div>
  );
};

export default ActionButtonGroup;