import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { IconButtonType, IconButtonTypes } from '../types/icon-button.type';

@Component({
    selector: 'iqser-icon-button [label]',
    templateUrl: './icon-button.component.html',
    styleUrls: ['./icon-button.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class IconButtonComponent {
    readonly iconButtonTypes = IconButtonTypes;

    @Input() label!: string;
    @Input() id?: string;
    @Input() icon?: string;
    @Input() showDot = false;
    @Input() disabled = false;
    @Input() boldText = false;
    @Input() type: IconButtonType = IconButtonTypes.default;
    @Output() readonly action = new EventEmitter<MouseEvent>();

    get buttonId(): string {
        return `${Math.random().toString(36).substring(2, 9)}-button`;
    }
}