<div class="favorite-button">
  <ng-container *ngIf="type === 'counter'">
    <app-button
      *ngIf="!isLiked; else isLikedTemplate"
      (onClick)="handleOnClick()"
      class="favorited"
      type="icon"
      icon="heart-outline"
      [iconSize]="24"
      title="{{ likesCount }} curtiram"
    ></app-button>

    <ng-template #isLikedTemplate>
      <app-button
        (onClick)="handleOnClick()"
        class="favorited"
        type="icon"
        icon="heart-filled"
        [iconSize]="24"
        title="{{ likesCount }} curtiram"
      ></app-button>
    </ng-template>

    <span class="counter h6">
      {{ likesCount }}
    </span>
  </ng-container>

  <ng-container *ngIf="type === 'action'">
    <app-button
      *ngIf="isLiked"
      (onClick)="handleOnClick()"
      class="favorited"
      type="icon"
      icon="heart-filled"
      [iconSize]="24"
      title="Descurtir"
    ></app-button>

    <app-button
      *ngIf="!isLiked"
      (onClick)="handleOnClick()"
      type="icon"
      icon="heart-outline"
      [iconSize]="24"
      title="Curtir"
    ></app-button>
  </ng-container>
</div>
