/**
 * Reusable component for displaying actual / projected points in a stacked format.
 * Used in standings tables and anywhere else points need to be shown with projections.
 */
interface PointsDisplayProps {
  actualPoints: number | null | undefined;
  projectedPoints: number | null | undefined;
  totalPoints: number;
  participantsRemaining?: number;
}

export function PointsDisplay({
  actualPoints,
  projectedPoints,
  totalPoints,
  participantsRemaining,
}: PointsDisplayProps) {
  const displayed = actualPoints !== null && actualPoints !== undefined ? actualPoints : totalPoints;
  const hasProjection =
    projectedPoints !== null &&
    projectedPoints !== undefined &&
    participantsRemaining !== undefined &&
    participantsRemaining > 0;

  if (!hasProjection) {
    return <span className="font-semibold">{displayed.toFixed(2)}</span>;
  }

  return (
    <div className="flex flex-col items-end">
      <span className="font-semibold">{displayed.toFixed(2)}</span>
      <span className="text-xs text-muted-foreground">
        {projectedPoints?.toFixed(2)} proj
      </span>
    </div>
  );
}