import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
    selector: 'app-family-card',
    templateUrl: './family-card.component.html',
    styleUrl: './family-card.component.css',
    standalone: false
})
export class FamilyCardComponent implements OnInit {
  @Input() icon: string;
  @Input() family: string;
  @Input() id: string;
  @Input() customIcon: string;
  @Input() iconFile: string; 

  @Output() familyClicked = new EventEmitter<string>();

  constructor(
    private _matIconRegistry: MatIconRegistry,
    private _domSanitizer: DomSanitizer,
  ) {
    this.icon = "";
    this.family = "";
    this.id = "";
    this.customIcon = "";
    this.iconFile = "";
  }

  ngOnInit(): void {
    if(this.customIcon == 'S'){
      this._matIconRegistry.addSvgIcon(
        this.icon,
        this._domSanitizer.bypassSecurityTrustResourceUrl(this.iconFile),
      );
    }
  }

  clickFamily(){
    this.familyClicked.emit(this.id);
  }
}
