<div class="select">
  <div class="select-box">
    <label *ngIf="label" [htmlFor]="identifier" class="p4">{{ label }}</label>

    <div class="select__wrapper">
      <button
        [id]="identifier"
        [disabled]="isDisabled"
        (click)="toggleOpen()"
        [ngStyle]="{
          'border-color': isOpen ? 'var(--blue-100)' : 'var(--gray-100)'
        }"
        class="select__field"
      >
        <span
          [ngStyle]="{
            color: value ? 'var(--text-primary)' : 'var(--text-tertiary)'
          }"
          class="p1"
          >{{ value || placeholder }}</span
        >

        <app-icon
          [size]="16"
          name="chevron-up"
          [ngStyle]="{
            transform: isOpen ? 'rotate(0deg)' : 'rotate(180deg)'
          }"
        ></app-icon>
      </button>

      <button
        *ngIf="showQuestionIcon"
        (click)="handleQuestionClick()"
        class="select__informations"
      >
        <app-icon name="question" [size]="16"></app-icon>
      </button>
    </div>
  </div>

  <div *ngIf="isOpen" class="select__dropdown">
    <button
      *ngFor="let option of options"
      (click)="handleChange(option)"
      class="dropdown__option"
    >
      <span class="p1">{{ option }} </span>
    </button>
  </div>
</div>
