ConditionCardUpdate.tsx

const renderConditionCards = () => {
  const renderedConditions = isMobileBreakpoint
    ? conditions[0]
    : conditions.slice(0, 4);
  return renderedConditions.map((condition, i) => {
    const percentageProbability = getPercentageText(condition.probability);
    const isTopCondition = i === 0;
    const isSecondCondition = i === 1;
    const lastIteration = i === renderedConditions.length - 1;
    const shouldRenderAccordion =
      isMobileBreakpoint && conditions.length > 1 && lastIteration;

    return (
      <>
        {isTopCondition && (
          <Text
            pt={[null, null, 5]}
            pb={6}
            textStyle="bodyLarge"
            fontWeight="bold"
          >
            {!isMobileBreakpoint
              ? "Top condition match"
              : "Top condition possibility"}
          </Text>
        )}
        {isSecondCondition && (
          <Flex>
            <Text
              pt={[6, null, 7]}
              pb={[8, null, 6]}
              textStyle="bodyLarge"
              fontWeight="bold"
            >
              Potential condition matches
            </Text>
          </Flex>
        )}
        <Box>
          <ConditionCard
            isTopCondition={isTopCondition}
            key={i}
            mb={[0, null, 5]}
            title={condition.common_name}
            onClick={() => onOpenConditionModal(condition)}
            possibilityPercent={
              condition.probability ? percentageProbability : null
            }
            likelihoodCategory={
              condition.probability
                ? getLikelihoodCategory(percentageProbability)
                : null
            }
          />
        </Box>

        {shouldRenderAccordion && renderConditionCardsAccordion()}
      </>
    );
  });
};