// Basic marking with default red color
@Preview
@Composable
fun MarkedPreview() = PreviewLab {
    val modifier: Modifier = fieldValue {
        ModifierField(
            label = "Marked Box",
            initialValue = ModifierFieldValue.mark()
        )
    }

    Box(modifier = modifier) {
        Text("Marked Content")
    }
}

// Custom color marking
@Preview
@Composable
fun CustomMarkPreview() = PreviewLab {
    val modifier: Modifier = fieldValue {
        ModifierField(
            label = "Blue Marked",
            initialValue = ModifierFieldValue.mark(color = Color.Blue, borderWidth = 3.dp)
        )
    }

    Text("Blue Marked Text", modifier = modifier)
}

// Separate border and background colors
@Preview
@Composable
fun CustomColorMarkPreview() = PreviewLab {
    val modifier: Modifier = fieldValue {
        ModifierField(
            label = "Two-Color Mark",
            initialValue = ModifierFieldValue.mark(
                borderColor = Color.Red,
                backgroundColor = Color.Yellow.copy(alpha = 0.3f),
                borderWidth = 2.dp
            )
        )
    }

    Text("Two-Color Marked", modifier = modifier)
}

// Thick border marking
@Preview
@Composable
fun ThickBorderPreview() = PreviewLab {
    val modifier: Modifier = fieldValue {
        ModifierField(
            label = "Thick Border",
            initialValue = ModifierFieldValue.mark(
                borderColor = Color.Green,
                backgroundColor = Color.Green.copy(alpha = 0.2f),
                borderWidth = 5.dp
            )
        )
    }

    Box(modifier = modifier.size(100.dp))
}