import type { Card } from '../game/types';
import { cardLabel, cardSymbol, isRed } from '../game/cards';
import './PlayingCard.css';

interface Props {
  card: Card;
  /** 是否对当前观众可见（暗牌且非本人时为 false，渲染牌背） */
  revealed: boolean;
  size?: 'xs' | 'sm' | 'md' | 'lg';
}

export function PlayingCard({ card, revealed, size = 'md' }: Props) {
  if (!revealed) {
    return <div className={`pcard pcard--${size} pcard--back`} aria-label="暗牌" />;
  }

  const joker = card.suit === 'joker';
  const red = isRed(card.suit);
  const colorClass = joker ? 'pcard--joker' : red ? 'pcard--red' : 'pcard--black';
  const label = cardLabel(card);
  const symbol = cardSymbol(card);

  return (
    <div className={`pcard pcard--${size} ${colorClass}`}>
      <div className="pcard__corner pcard__corner--tl">
        <span className="pcard__rank">{label}</span>
        <span className="pcard__suit">{symbol}</span>
      </div>
      <div className="pcard__center">{symbol}</div>
      <div className="pcard__corner pcard__corner--br">
        <span className="pcard__rank">{label}</span>
        <span className="pcard__suit">{symbol}</span>
      </div>
    </div>
  );
}
