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

@Component({
  selector: 'app-button',
  standalone: true,
  imports: [CommonModule],
  template: `
    <button
      [type]="type"
      [disabled]="disabled"
      (click)="clicked.emit($event)"
      [ngClass]="[
        'transition-all duration-200 ease-in-out font-inter font-medium flex items-center justify-center cursor-pointer',
        baseClasses,
        variantClasses[variant]
      ]"
    >
      <ng-content></ng-content>
    </button>
  `
})
export class ButtonComponent {
  @Input() type: 'button' | 'submit' | 'reset' = 'button';
  @Input() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';
  @Input() disabled = false;
  @Input() size: 'sm' | 'md' | 'lg' = 'md';
  @Output() clicked = new EventEmitter<MouseEvent>();

  get baseClasses(): string {
    switch (this.size) {
      case 'sm':
        return 'px-3 py-1.5 text-sm rounded-sm';
      case 'lg':
        return 'px-6 py-3 text-lg rounded-[0.125rem]';
      case 'md':
      default:
        return 'px-4 py-2 text-base rounded-[0.125rem]'; // sm roundedness from DESIGN.md
    }
  }

  get variantClasses(): Record<string, string> {
    return {
      primary: 'bg-[var(--color-primary-container)] text-[var(--color-on-primary-container)] hover:bg-opacity-90 disabled:opacity-50 disabled:cursor-not-allowed',
      secondary: 'bg-transparent text-[var(--color-on-surface)] ghost-border hover:bg-[var(--color-surface-bright)] hover:bg-opacity-10',
      tertiary: 'bg-transparent text-[var(--color-primary)] hover:underline px-0 py-0'
    };
  }
}
