// src/components/RipetitioneCard.tsx
import React, { JSX } from "react";
import { RepetitionResult } from "../utils/calculatorFunctions";

interface RepetitionCardProps {
  repetition: RepetitionResult;
  index: number;
  odd1: number;
  odd2: number;
}

const RepetitionCard: React.FC<RepetitionCardProps> = ({
  repetition,
  index,
  odd1,
  odd2,
}) => {
  const formatOdd = (amount: number): string => {
    return amount.toFixed(2);
  };

  const formatStake = (amount: number): string => {
    return amount.toFixed(0);
  };

  const coloraPrezzo = (number: number): JSX.Element => {
    return (
      <span className={number >= 0 ? "positive" : "negative"}>
        {formatOdd(number) + "€"}
      </span>
    );
  };

  return (
    <div className="card">
      <div className="card-body">
        <h5 className="card-title text-center">Ripetizione {index + 1}</h5>
        <hr />
        <ul>
          <li>
            <span>
              <b>{formatStake(repetition.player)}€</b> a quota {formatOdd(odd1)}
            </span>
            <span>&rarr; {coloraPrezzo(repetition.vPlayer)}</span>
          </li>
          <li>
            <span>
              <b>{formatStake(repetition.bank)}€</b> a quota {formatOdd(odd2)}
            </span>
            <span>&rarr; {coloraPrezzo(repetition.vBank)}</span>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default RepetitionCard;