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

import { IconName, IconSize } from '../icon/icon.component';

export type ButtonType =
  | 'primary'
  | 'secondary'
  | 'ghost'
  | 'icon'
  | 'tertiary';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss'],
})
export class ButtonComponent {
  @Input() type: ButtonType = 'primary';
  @Input() isDisabled = false;

  @Input() icon?: IconName;
  @Input() iconSize: IconSize = 24;
  @Input() iconPosition: 'left' | 'right' = 'left';

  @Input() title = '';

  @Output() onClick = new EventEmitter();

  onClickHandler(event: Event) {
    this.onClick.emit(event);
  }
}
