@switch (buttonType) {
  @case ('icon') {
    <button mat-icon-button color="primary" [matMenuTriggerFor]="commandMenu" [disabled]="disabled">
      <mat-icon>{{ icon }}</mat-icon>
    </button>
  }
  @case ('text') {
    <button class="action-button" [disabled]="clientData.length === 0 || disabled" [matMenuTriggerFor]="commandMenu">
      {{ buttonText }}
    </button>
  }
  @case ('menu-item') {
    <button mat-menu-item [matMenuTriggerFor]="commandMenu" [disabled]="disabled">
      <mat-icon>{{ icon }}</mat-icon>
      <span>{{ buttonText }}</span>
    </button>
  }
}

<mat-menu #commandMenu="matMenu">
  @for (command of arrayCommands; track command.slug) {
    <button mat-menu-item [disabled]="command.disabled || (command.slug === 'create-image' && clientData.length > 1)"
      (click)="onCommandSelect(command.slug)">
      @if (command.icon) {
        <mat-icon>{{ command.icon }}</mat-icon>
      }
      <span>{{ command.translationKey ? (command.translationKey | translate) : (command.label || command.slug) }}</span>
    </button>
  }

  @if (pluginGroups.length > 0) {
    <mat-divider></mat-divider>
    @for (group of pluginGroups; track group.plugin.name) {
      <button mat-menu-item [matMenuTriggerFor]="pluginSubMenu">
        @if (group.plugin.icon) {
          <mat-icon>{{ group.plugin.icon }}</mat-icon>
        }
        <span>{{ group.plugin.titleKey ? (group.plugin.titleKey | translate) : group.plugin.title }}</span>
      </button>

      <mat-menu #pluginSubMenu="matMenu">
        @for (cmd of group.commands; track cmd.slug) {
          <button mat-menu-item [disabled]="cmd.disabled" (click)="onCommandSelect(cmd.slug)">
            @if (cmd.icon) {
              <mat-icon>{{ cmd.icon }}</mat-icon>
            }
            <span>{{ (cmd.translationKey || cmd.labelKey) ? ((cmd.translationKey || cmd.labelKey) | translate) : cmd.label }}</span>
          </button>
        }
      </mat-menu>
    }
  }
</mat-menu>