type NumberedListItemProps = {
    /** Index of the element. Index + 1 is displayed in circle */
    index: number;
    /** List item text */
    text: string;
}

/**
 * Numbered list item - the number is displayed in a circle in front of the text
 * @param elementNumber Number to be displayed
 * @param text Text to be displayed
 */
export function NumberedListItem({index, text}: NumberedListItemProps) {
    return <li className="flex items-start gap-4">
        {/* Step number circle */}
        <div className="circular-container">
            {index + 1}
        </div>

        {/* Step text */}
        <p className="leading-relaxed">{text}</p>
    </li>;
}