val icons = listOf(
    <http://Icons.Rounded.Menu|Icons.Rounded.Menu>,
    Icons.Rounded.Email,
    Icons.Rounded.ExitToApp,
    Icons.Rounded.Home
)

val colors = listOf(
    Color.Yellow,
    Color.Green,
    Color.Red,
    Color.Blue
)

@Composable
fun FacesScreen(faceCount: Int = 12) {
    val faceCircleSize = 80.dp
    Row(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Gray),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically
    ) {

        Row {
            repeat(icons.count()) { idx ->
                Box(
                    modifier = Modifier.offset(idx.dp * (-20))
                ) {
                    Box(
                        contentAlignment = Alignment.Center,
                        modifier = Modifier
                            .border(2.dp, color = Color.White, shape = CircleShape)
                            .clip(CircleShape)
                            .size(faceCircleSize)
                            .background(colors[idx])
                    ) {
                        Icon(
                            icons[idx],
                            contentDescription = "Localized description",
                            tint = Color.White,
                            modifier = Modifier.fillMaxSize().padding(12.dp)
                        )
                        if (idx == icons.count() - 1) {
                            Box(
                                contentAlignment = Alignment.Center,
                                modifier = Modifier
                                    .fillMaxSize()
                                    .background(brush = Brush.linearGradient(colors),  shape = CircleShape, alpha = 0.9f)
                            ) {
                                Text(text = "+$faceCount", color = Color.White, fontSize = 30.sp)
                            }
                        }
                    }
                }
            }
        }
    }
}