Stepped progress bar with android compose

My requirement was slightly different from the actual question so i have update the code based on answers from other folks.

Thank You everyone for the help, here is the updated code

@Composable
fun StepsProgressBar(modifier: Modifier = Modifier, numberOfSteps: Int, currentStep: Int, color: Color) {
    Row(
        modifier = modifier,
        verticalAlignment = Alignment.CenterVertically
    ) {
        for (step in 0..numberOfSteps) {
            Step(
                modifier = Modifier.weight(1F),
                isCompete = step < currentStep,
                isLast = step == numberOfSteps,
                isPending = currentStep - step == 1,
                stepColor = color
            )
        }
    }
}

@Composable
fun Step(modifier: Modifier = Modifier, isCompete: Boolean, isLast: Boolean, isPending: Boolean, stepColor: Color) {
    val color: Color = if (isCompete) stepColor else colorResource(id = R.color.Gray300)
    val sColor: Color = if (!isPending && isCompete) stepColor else colorResource(id = R.color.Gray300)

    Box(modifier = modifier) {
        if (!isLast) {
            //Line
            HorizontalDivider(
                modifier = Modifier.align(Alignment.Center),
                color = color,
                thickness = 4.dp
            )
        }
        //Circle
        Canvas(modifier = Modifier
            .size(12.dp)
            .align(Alignment.CenterStart),
            onDraw = {
                drawCircle(color = color)
            }
        )
    }
    if (!isLast) {
        Box(modifier = modifier) {

            //Line
            HorizontalDivider(
                modifier = Modifier.align(Alignment.CenterEnd).background(
                    Brush.horizontalGradient(
                        startX = 0f,
                        endX = 25f,
                    colors = listOf(
                        color,
                        sColor
                    )
                )),
                color = Color.Transparent,
                thickness = 4.dp
            )
        }
    }
}

For @Preview() use like this

StepsProgressBar(modifier = Modifier.fillMaxWidth(), numberOfSteps = 5, currentStep = 3, color = Color.Red)

In case if you want to use it in XML based UI

<androidx.compose.ui.platform.ComposeView
            android:id="@+id/progress_view"
            android:layout_width="match_parent"
            android:layout_height="12dp"/>

findViewById<ComposeView>(R.id.progress_view).setContent {
MaterialTheme {
                    Surface {
                        StepsProgressBar(
                            modifier = Modifier.fillMaxWidth(),
                            numberOfSteps = 5,
                            currentStep = 3
                            ),
                            color = colorResource(
                                id = R.color.Primary
                        )
                    }
                }
}

Output: