import { Component, ElementRef, Input, inject, signal } from '@angular/core';

/** Monedero: pill con 🪙 y el saldo. Hace walletBump cuando se le pide (al ganar). */
@Component({
  selector: 'app-wallet',
  imports: [],
  template: `
    <span class="wallet" [class.wallet--bump]="bumping()">
      <span class="wallet__coin">🪙</span>
      <span class="wallet__amount">{{ coins }}</span>
    </span>
  `,
  styles: [
    `
      .wallet {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 9px 18px;
        border-radius: var(--radius-pill);
        background: var(--coin-bg);
        color: var(--coin-text);
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1.4rem;
      }
      .wallet--bump { animation: walletBump 0.45s ease; }
    `,
  ],
})
export class WalletComponent {
  @Input({ required: true }) coins = 0;

  protected readonly bumping = signal(false);
  private readonly el = inject(ElementRef<HTMLElement>);

  /** Rectángulo del monedero: destino de las monedas voladoras. */
  getRect(): DOMRect {
    return (this.el.nativeElement as HTMLElement).getBoundingClientRect();
  }

  /** Dispara la animación de "rebote" del monedero. */
  bump(): void {
    this.bumping.set(false);
    // Reinicia la animación en el siguiente frame.
    requestAnimationFrame(() => this.bumping.set(true));
    setTimeout(() => this.bumping.set(false), 500);
  }
}