+ {Array.from({ length: totalStages }).map((_, index) => {
+ const isActive = index <= currentStage;
+ const isPast = index < currentStage;
+ const hasChoice = index < previousChoices.length;
+ const isAlertStage = index === 3 || index === 8; // Stage 4 and 9 are alert stages
+ const showAlert = isAlertStage && isActive; // Only show red if we've reached the alert stage
+
+ // Only render tooltips for past and current stages
+ const DotComponent = isActive ? (
+
+
+
+
+ {hasChoice && (
+
+ )}
+
+
+
+ {hasChoice ? (
+
+
{getMonthName(index)}
+
{getChoiceName(previousChoices[index], index)}
+
+ ) : (
+
+
{getMonthName(index)}
+
+ )}
+
+
+
+ ) : (
+ // For future stages, just render the dot without a tooltip
+
+ );
+
+ return (
+
+ {index > 0 && (
+
+ )}
+
+ {DotComponent}
+
+ );
+ })}
+