import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { suitSymbols, Suit } from '../../models/blackjack.model';

@Component({
  selector: 'app-playing-card',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div
      class="w-24 h-36 rounded-lg p-2 relative flex flex-col justify-between shadow-lg"
      [class]="hidden ? 'bg-red-800' : 'bg-white'"
    >
      @if (!hidden) {
        <span class="text-xl font-bold text-accent-red">{{ getDisplayRank(rank) }}</span>
      }
      @if (!hidden) {
        <span
          class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-3xl text-accent-red"
          >{{ getSuitSymbol(suit) }}</span
        >
      }
      @if (!hidden) {
        <span class="text-xl font-bold text-accent-red self-end rotate-180">{{
          getDisplayRank(rank)
        }}</span>
      }
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PlayingCardComponent {
  @Input({ required: true }) rank!: string;
  @Input({ required: true }) suit!: Suit;
  @Input({ required: true }) hidden!: boolean;

  protected getSuitSymbol(suit: Suit): string {
    return suitSymbols[suit];
  }

  protected getDisplayRank(rank: string): string {
    const rankMap: Record<string, string> = {
      TWO: '2',
      THREE: '3',
      FOUR: '4',
      FIVE: '5',
      SIX: '6',
      SEVEN: '7',
      EIGHT: '8',
      NINE: '9',
      TEN: '10',
      JACK: 'J',
      QUEEN: 'Q',
      KING: 'K',
      ACE: 'A',
    };
    return rankMap[rank] || rank;
  }
}