import type { Card } from '../game/types';
import { PlayingCard } from './PlayingCard';
import './RemainingModal.css';

interface Props {
  cards: Card[];
  onClose: () => void;
}

export function RemainingModal({ cards, onClose }: Props) {
  return (
    <div className="rm-mask" onClick={onClose}>
      <div className="rm-card" onClick={(e) => e.stopPropagation()}>
        <div className="rm-card__title">剩余牌</div>
        <div className="rm-card__sub">本局牌堆未发出的牌（共 {cards.length} 张）</div>
        {cards.length === 0 ? (
          <div className="rm-empty">本局牌已发完</div>
        ) : (
          <div className="rm-grid">
            {cards.map((c) => (
              <PlayingCard key={c.id} card={c} revealed size="sm" />
            ))}
          </div>
        )}
        <button className="rm-close" onClick={onClose}>
          知道了
        </button>
      </div>
    </div>
  );
}
