<div class="expandable-section" [class.private]="variant === 'private'">

  <button type="button" class="section-header" (click)="toggle()">
    <span class="section-title">
      @if (icon) {
        <span class="section-icon">{{ icon }}</span>
      }
      {{ title }}
    </span>
    <lucide-icon [img]="isOpen ? ChevronUp : ChevronDown" [size]="16"></lucide-icon>
  </button>

  @if (isOpen) {
    <div class="section-content">
      <ng-content></ng-content>
    </div>
  }

</div>
