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

@Component({
  selector: 'storybook-button-component',
  template: ` <button (click)="onClick.emit($event)" [style.background-color]="bgColor">{{ text }}</button> `,
  styles: [
    `
      button {
        border: 1px solid #eee;
        border-radius: 3px;
        background-color: #ffffff;
        cursor: pointer;
        font-size: 15px;
        padding: 3px 10px;
        margin: 10px;
      }
    `,
  ],
})
export default class ButtonComponent {
  /**
   * Specify the button Label
   */
  @Input()
  text: string = 'Default Value';

  /**
   * Specify the button bgColor
   */
  @Input()
  bgColor: string;

  /**
   * Action click event
   */
  @Output()
  onClick: EventEmitter<any> = new EventEmitter<any>();
}