// Importieren Sie HostBinding
import { Component, Input, ElementRef, Renderer2, HostListener, HostBinding } from '@angular/core'; 
import { CommonModule } from '@angular/common';
import { IconComponent } from '../icon/icon.component';

type ButtonType = 'primary' | 'secondary' | 'stroked' | 'flat' | 'icon' | 'icon-danger';

@Component({
  selector: 'app-button',
  standalone: true, 
  imports: [CommonModule, IconComponent],
  templateUrl: './button.component.html',
  styleUrl: './button.component.css'
})
export class ButtonComponent {
  @Input() buttonType: ButtonType = 'primary';
  @Input() submitType: 'button' | 'submit' = 'button';
  @Input() disabled = false;
  @Input() fullWidth = false;
  @Input() iconName: string | null = null; 
  @Input() svgColor: string | null = null;
  
  // Der Tooltip-Input
  @Input() tooltip: string | null = null;

  // HIER IST DIE HINZUGEFÜGTE LOGIK:
  // HostBinding verknüpft die `tooltip`-Eigenschaft mit dem `data-tooltip`-Attribut
  // des <app-button>-Host-Elements.
  @HostBinding('attr.data-tooltip') get tooltipAttr() {
    return this.tooltip;
  }

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('click', ['$event'])
  onClick(event: MouseEvent) {
    if (this.disabled) {
      return;
    }
    
    const button = this.el.nativeElement.querySelector('.btn');
    if (!button) return;

    // --- Ihre Ripple-Logik bleibt hier unverändert ---
    const existingRipple = button.querySelector('.ripple');
    if (existingRipple) {
      existingRipple.remove();
    }
    const circle = this.renderer.createElement('span');
    const diameter = Math.max(button.clientWidth, button.clientHeight);
    const radius = diameter / 2;
    this.renderer.setStyle(circle, 'width', `${diameter}px`);
    this.renderer.setStyle(circle, 'height', `${diameter}px`);
    this.renderer.setStyle(circle, 'left', `${event.clientX - button.offsetLeft - radius}px`);
    this.renderer.setStyle(circle, 'top', `${event.clientY - button.offsetTop - radius}px`);
    this.renderer.addClass(circle, 'ripple');
    this.renderer.appendChild(button, circle);
  }
}