<div class="chat-shell">
  <div class="chat-header">
    <h3 class="chat-title">Chat</h3>
    <button type="button" class="close-button" (click)="close()" aria-label="Close chat">
      <mat-icon>close</mat-icon>
    </button>
  </div>

  <div class="chat-content">
    @for (chat of chatList; track chat) {
      <div class="message-wrapper">
        <img [src]="chat.imgUrl" class="user-icon" [alt]="chat.userName">
        <div class="message-content">
          <p class="user-name">{{chat.userName}}</p>
          <p class="user-message">{{chat.message}}</p>
        </div>
      </div>
    }
  </div>

  <div class="composer">
    <input
      class="composer-input"
      type="text"
      [(ngModel)]="message"
      placeholder="Type a message"
      (keydown.enter)="send()"
    >

    <button
      mat-flat-button
      color="primary"
      class="send-button"
      (click)="send()"
      [disabled]="!message?.trim()"
    >
      Send
    </button>
  </div>
</div>
