import { ChangeDetectionStrategy, Component, ViewEncapsulation, input, linkedSignal } from '@angular/core';

@Component({
  selector: 'pfe-error-message',
  templateUrl: 'pfe-error-message.component.html',
  styleUrls: ['./pfe-error-message.component.scss'],
  encapsulation: ViewEncapsulation.None,
  standalone: false,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PfeErrorMessageComponent {
  /**
   * Controls the visibility of the whole message, if true the component is hidden
   */
  readonly hideError = input<boolean>();

  /**
   * Local, writable visibility state seeded from the `hideError` input.
   * Lets the user close the message via `closeError()` while still reacting to input changes.
   */
  protected readonly hideErrorState = linkedSignal(() => this.hideError());

  /**
   * Key for the message to display
   */
  readonly message = input<string>();

  /**
   * Controls the visibility close button on the top right corner, if false the icon is visible
   * so the user can close the message. True by default, so the massage can't be closed
   */
  readonly hideClose = input(true);

  closeError() {
    this.hideErrorState.set(true);
  }
}