<div class="success-state">
  <div class="success-icon">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
      <polyline points="22 4 12 14.01 9 11.01"></polyline>
    </svg>
  </div>

  @switch (context()) {
    @case ("contact") {
      <h3>{{ "CONTACT.SUCCESS_TITLE" | translate }}</h3>
      <p>{{ "CONTACT.SUCCESS_DESC" | translate }}</p>
      <app-button (click)="action.emit()">{{
        "CONTACT.SEND_ANOTHER" | translate
      }}</app-button>
    }
    @case ("calc") {
      <h3>{{ "CALC.ORDER_SUCCESS_TITLE" | translate }}</h3>
      <p>{{ "CALC.ORDER_SUCCESS_DESC" | translate }}</p>
      <app-button (click)="action.emit()">{{
        "CALC.NEW_QUOTE" | translate
      }}</app-button>
    }
    @case ("shop") {
      <h3>{{ "SHOP.SUCCESS_TITLE" | translate }}</h3>
      <p>{{ "SHOP.SUCCESS_DESC" | translate }}</p>
      <app-button (click)="action.emit()">{{
        "SHOP.CONTINUE" | translate
      }}</app-button>
    }
  }
</div>
