type Props = {
  gameId: number;
  playerId: number;
  result: { yourScore: number | null; opponentScore: number | null };
};

export default function Finished({ result }: Props) {
  const { yourScore, opponentScore } = result;
  const yourScoreToCompare = yourScore ?? Infinity;
  const opponentScoreToCompare = opponentScore ?? Infinity;
  const resultText =
    yourScoreToCompare === opponentScoreToCompare
      ? "引き分け"
      : yourScoreToCompare < opponentScoreToCompare
        ? "あなたの勝ち"
        : "あなたの負け";
  return (
    <>
      <div>対戦終了</div>
      <div>
        <div>{resultText}</div>
        <div>あなたのスコア: {yourScore ?? "なし"}</div>
        <div>相手のスコア: {opponentScore ?? "なし"}</div>
      </div>
    </>
  );
}