import { Component, input } from '@angular/core';

type Variant = 'primary' | 'secondary' | 'subtle' | 'danger' | 'ghost';

/** Atom: button. Thin wrapper over the CIBG/Bootstrap button CSS. */
@Component({
  selector: 'app-button',
  template: `
    <button
      [type]="type()"
      [disabled]="disabled()"
      class="btn"
      [class.btn-primary]="variant() === 'primary'"
      [class.btn-secondary]="variant() === 'secondary'"
      [class.btn-link]="variant() === 'subtle'"
      [class.btn-danger]="variant() === 'danger'"
      [class.btn-ghost]="variant() === 'ghost'"
    >
      <ng-content />
    </button>
  `,
})
export class ButtonComponent {
  variant = input<Variant>('primary');
  type = input<'button' | 'submit'>('button');
  disabled = input(false);
}
