import type { Suit } from '../../api/types'
import { SUIT_NAMES, SUITS } from '../../util/cards'
import styles from './TrumpPicker.module.css'

interface TrumpPickerProps {
  onChoose: (suit: Suit) => void
}

export function TrumpPicker({ onChoose }: TrumpPickerProps) {
  return (
    <div className={styles.panel}>
      <p className={styles.question}>A wizard was turned up — choose the trump suit.</p>
      <div className={styles.suits}>
        {SUITS.map((suit) => (
          <button key={suit} type="button" className={`${styles.suit} ${styles[suit]}`} onClick={() => onChoose(suit)}>
            {SUIT_NAMES[suit]}
          </button>
        ))}
      </div>
    </div>
  )
}