import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'lib-icon',
  templateUrl: './icon.component.html',
  styleUrls: ['./icon.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class IconComponent implements OnInit {
  @Input() name: string;
  @Input() id: string;
  @Input() type = 'svg';
  @Input() width: string;
  @Input() height: string;
  @Input() alt: string;
  @Input() color: string;
  @Input() mt: string;
  @Input() ml: string;
  @Input() mr: string;
  @Input() pl: string;
  @Input() pr: string;
  @Input() pt: string;
  @Input() rotateBackwards: boolean;
  @Input() transition: string;
  @Input() translateX: string;
  @Input() translateY: string;
  get transform() {
    let _transform = '';
    if (this.translateX) {
      _transform += ` translateX(${this.translateX})`;
    }
    if (this.translateY) {
      _transform += ` translateY(${this.translateY})`;
    }
    if (this.rotateBackwards) {
      _transform += ' rotate(-180deg)';
    }
    return _transform;
  }
  @Output() click = new EventEmitter();
  style: any;
  constructor() {}

  ngOnInit() {}

  clickEvent() {
    this.click.emit();
  }
}
