<ui-button
  [class]="['stateful-button', stateClass()]"
  [color]="color()"
  [size]="size()"
  [pending]="pending()"
  (click)="handleButtonClick()"
  data-what="stateful-button"
  [attr.data-which]="state()"
  [disabled]="disabled()"
>
  @switch (state()) {
    @case ('default') {
      <div
        class="stateful-button-content stateful-button-content--default"
        [@fade]
      >
        <span>{{ defaultContent() }}</span>
      </div>
    }
    @case ('success') {
      <div
        class="stateful-button-content stateful-button-content--success"
        [@fade]
      >
        <ng-icon name="isaActionCheck" size="1.5rem"></ng-icon>
        <span>{{ successContent() }}</span>
      </div>
    }
    @case ('error') {
      <div
        class="stateful-button-content stateful-button-content--error"
        [@fade]
      >
        <span class="font-normal">{{ errorContent() }}</span>
        @if (errorAction()) {
          <span
            class="stateful-button-action"
            (click)="handleActionClick($event)"
            (keydown.enter)="handleActionClick($event)"
            (keydown.space)="handleActionClick($event)"
            tabindex="0"
            role="button"
            data-what="stateful-button-action"
          >
            {{ errorAction() }}
          </span>
        } @else {
          <span></span>
        }
      </div>
    }
  }
</ui-button>
