import clsx from "clsx";
import {NumberCircle} from "./NumberCircle.tsx";

type NumberedListItemProps = {
    /** Index of the element. Index + 1 is displayed in circle */
    index: number;
    /** List item text */
    text: string;
    className?: 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, className = ""}: NumberedListItemProps) {
    return <li className={clsx(
        "flex items-start gap-4",
        className)}>
        {/* Step number circle */}
        <NumberCircle
            number={index + 1}
        />

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