import { NgIf } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { RouterLink } from '@angular/router';
import { twMerge } from 'tailwind-merge';

@Component({
  selector: 'app-button',
  imports: [NgIf, RouterLink],
  templateUrl: './button.component.html',
})
export class ButtonComponent {
  @Output() click = new EventEmitter<Event>();
  @Input() disabled: boolean = false;
  @Input() color: 'yellow' | 'orange' = 'yellow';
  @Input() link: null | string = null;

  getStyle() {
    let col = 'a';

    switch (this.color) {
      case 'yellow':
        col = 'bg-amber-400';
        break;
      case 'orange':
        col = 'bg-orange-400';
    }

    return twMerge(
      'p-1 px-5 transition-colors rounded-full hover:bg-amber-500 ',
      col,
    );
  }
}