@Preview(widthDp = 400, heightDp = 2000)
@Composable
private fun AnyCustomShapePreview() {
    val directions = listOf(
        BeakDirection.Top,
        BeakDirection.Bottom,
        BeakDirection.Left,
        BeakDirection.Right,
    )
    val sizes = listOf(
        70.dp to 100.dp,
        100.dp to 100.dp,
        150.dp to 100.dp,
    )
    val ratios = listOf(
        1.0f,
        0.75f,
        0.5f,
        0.25f,
        0.0f,
    )
    MaterialTheme {
        Column(
            modifier = Modifier.background(Color(0xFF111111)),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
        ) {

            directions.forEachIndexed { index, direction ->
                Text(text = "$direction", color = Color.White, modifier = Modifier
                    .align(Alignment.Start)
                    .offset(x = 92.dp), fontWeight = FontWeight.Bold)
                ratios.forEach { ratio ->
                    Row {
                        sizes.forEachIndexed { index, (width, height) ->
                            AnyCustomShapeContainer(
                                modifier = Modifier
                                    .width(width)
                                    .height(height),
                                ratio = ratio,
                                direction = direction,
                            )
                            if (index != sizes.lastIndex)
                                Spacer(modifier = Modifier.size(16.dp))
                        }
                    }
                }
                if (index != directions.lastIndex)
                    Spacer(modifier = Modifier.size(48.dp))
            }
        }
    }
}

@Composable
fun AnyCustomShapeContainer(
    modifier: Modifier,
    ratio: Float,
    direction: BeakDirection,
) {
    Column {
        Spacer(modifier = Modifier.height(8.dp))
        Text(
            text = "Ratio = $ratio",
            fontSize = 10.sp,
            color = Color.White
        )
        Spacer(modifier = Modifier.height(4.dp))
        AnyCustomShape(modifier = modifier, ratio = ratio, direction = direction)
        Spacer(modifier = Modifier.height(8.dp))
    }
}


@Composable
fun AnyCustomShape(
    modifier: Modifier,
    ratio: Float,
    direction: BeakDirection,
) {
    Spacer(
        modifier = modifier
            .background(
                color = Color.White.copy(alpha = 0.1f)
            )
            .background(
                color = Color.White,
                shape = BeakShape(ratio = ratio, direction = direction),
            )
    )
}