import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PlayingCardComponent } from '../playing-card/playing-card.component';
import { Card } from '../../models/blackjack.model';

@Component({
  selector: 'app-player-hand',
  standalone: true,
  imports: [CommonModule, PlayingCardComponent],
  template: `
    <div class="space-y-4">
      <h3 class="section-heading text-2xl mb-4">Deine Karten</h3>
      <div class="card p-6 !bg-emerald">
        <div
          class="flex justify-center gap-4 min-h-[160px] p-4 border-2 border-emerald-400 rounded-lg"
        >
          @if (cards.length > 0) {
            @for (card of cards; track card) {
              <app-playing-card
                [rank]="card.rank"
                [suit]="card.suit"
                [hidden]="card.hidden"
              ></app-playing-card>
            }
          } @else {
            <div class="flex items-center justify-center text-white/70 text-lg font-medium">
              Platziere eine Wette um zu spielen...
            </div>
          }
        </div>
      </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PlayerHandComponent {
  @Input() cards: Card[] = [];
}