1// src/components/RipetitioneCard.tsx
 2import React, { JSX } from "react";
 3import { RepetitionResult } from "../utils/calculatorFunctions";
 4
 5interface RepetitionCardProps {
 6  repetition: RepetitionResult;
 7  index: number;
 8  odd1: number;
 9  odd2: number;
10}
11
12const RepetitionCard: React.FC<RepetitionCardProps> = ({
13  repetition,
14  index,
15  odd1,
16  odd2,
17}) => {
18  const formatOdd = (amount: number): string => {
19    return amount.toFixed(2);
20  };
21
22  const formatStake = (amount: number): string => {
23    return amount.toFixed(0);
24  };
25
26  const coloraPrezzo = (number: number): JSX.Element => {
27    return (
28      <span className={number >= 0 ? "positive" : "negative"}>
29        {formatOdd(number) + "€"}
30      </span>
31    );
32  };
33
34  return (
35    <div className="card">
36      <div className="card-body">
37        <h5 className="card-title text-center">Ripetizione {index + 1}</h5>
38        <hr />
39        <ul>
40          <li>
41            <span>
42              <b>{formatStake(repetition.player)}€</b> a quota {formatOdd(odd1)}
43            </span>
44            <span>&rarr; {coloraPrezzo(repetition.vPlayer)}</span>
45          </li>
46          <li>
47            <span>
48              <b>{formatStake(repetition.bank)}€</b> a quota {formatOdd(odd2)}
49            </span>
50            <span>&rarr; {coloraPrezzo(repetition.vBank)}</span>
51          </li>
52        </ul>
53      </div>
54    </div>
55  );
56};
57
58export default RepetitionCard;