import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
import { UiRuntimeFacade } from '../../facades/runtime/ui-runtime.facade';

@Component({
  selector: 'app-logo',
  template: `<img [src]="logoPath" [alt]="brandName + ' logo'" class="logo-img" fetchpriority="high" draggable="false" />`,
  styles: [`
    .logo-img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      pointer-events: none;
      user-select: none;
    }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class LogoComponent {
  /** Overrides the default (branding.logoUrl) logo, e.g. footer.logoUrl. */
  @Input() srcOverride?: string;

  constructor(private readonly uiRuntime: UiRuntimeFacade) {}

  get brandName(): string {
    return this.uiRuntime.marketplaceName();
  }

  get logoPath(): string {
    return this.srcOverride || this.uiRuntime.logoUrl();
  }
}
