SlideToBookButton.kt

/**
 *
 * This composable creates a custom, swipeable button that resembles a "slide to book" interaction.
 * It is composed of two main parts:
 *  - The outer track (the full-width button background) which displays the label.
 *  - The inner slider thumb, which can be dragged from left to right.
 *
 *
 * @param btnText Text to display on the outer button track (e.g., "Book Ride ₹199")
 * @param btnTextStyle Text style for the button label (e.g., font weight, color)
 * @param outerBtnBackgroundColor Background color for the full-width outer button
 * @param sliderBtnBackgroundColor Background color for the draggable thumb button
 * @param sliderBtnIcon Icon shown inside the slider thumb (e.g., car or arrow icon)
 * @param onBtnSwipe Callback triggered once the user slides to complete the booking
 */
@Composable
fun SlideToBookButton(
    btnText: String,
    btnTextStyle: TextStyle,
    outerBtnBackgroundColor: Color,
    sliderBtnBackgroundColor: Color,
    @DrawableRes sliderBtnIcon: Int,
    onBtnSwipe: () -> Unit
) {
    // Slider button width
    val sliderButtonWidthDp = 70.dp
    
    // The root layout for the button — stretches full width and has fixed height
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(55.dp)
    ) {
        // Outer track — acts as the base of the button
        Box(
            modifier = Modifier
                .matchParentSize()
                .background(
                    color = outerBtnBackgroundColor,
                    shape = RoundedCornerShape(12.dp)
                )
        ) {
            // The center-aligned button label
            Text(
                text = btnText,
                style = btnTextStyle,
                modifier = Modifier.align(Alignment.Center)
            )
        }

        // Slider thumb container, positioned at the left edge of the button
        Row(
            modifier = Modifier
                .align(Alignment.CenterStart)
                .padding(1.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Box(
                modifier = Modifier
            ) {
                // The draggable thumb itself
                SliderButton(
                    sliderBtnWidth = sliderButtonWidthDp,
                    sliderBtnBackgroundColor = sliderBtnBackgroundColor,
                    sliderBtnIcon = sliderBtnIcon
                )
            }
        }
    }
}

/**
 *
 * This composable defines the visual appearance of the slider thumb — a small rounded box
 * that contains an icon (usually a car or arrow). It is positioned inside the larger
 * SlideToBookButton and will later be made draggable.
 *
 * @param sliderBtnBackgroundColor Background color for the thumb (distinct from the track)
 * @param sliderBtnIcon Icon displayed at the center of the thumb button
 */
@Composable
private fun SliderButton(
    sliderBtnWidth: Dp, // Width of the button    
    sliderBtnBackgroundColor: Color, // Background color for the thumb
    @DrawableRes sliderBtnIcon: Int  // Icon shown inside the thumb
) {
    // Root Box for the slider thumb
    Box(
        modifier = Modifier
            .wrapContentSize()
            .width(70.dp)
            .height(54.dp)
            .background(
                color = sliderBtnBackgroundColor,
                shape = RoundedCornerShape(12.dp)
            ),
        contentAlignment = Alignment.Center
    ) {
        Row(
            modifier = Modifier
                .padding(start = 10.dp, end = 10.dp)
                .align(Alignment.Center),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Image(
                painter = painterResource(sliderBtnIcon),
                contentDescription = "Car Icon",
                modifier = Modifier.size(36.dp)
            )
        }
    }
}