@Composable
fun AppScreen() {
    Scaffold {
        ScrollableColumn {
            for (idx in 1..20) {
                var savingResult by remember { mutableStateOf(0)}
                ExpandableCardLayout(content = {
                    Text("Element: $idx, Shaped Icon")
                    Text("Article Headline")
                    Text("Authors and Sources")
                }, extendedContent = {
                    Column {
                        Divider(Modifier.padding(vertical = 8.dp, horizontal = 40.dp))
                        Text("Detailed Description with a summary of the main article. This Description should be about 2 sentences long, and contain the keywords.")

                        when (savingResult) {
                            0 -> Spacer(Modifier.padding(8.dp))
                            1 -> Text("Saved Article")
                            2 -> {
                                Divider(
                                    Modifier.padding(
                                        vertical = 8.dp,
                                        horizontal = 30.dp
                                    )
                                )
                                Card(Modifier.clip(RoundedCornerShape(8.dp)), backgroundColor = Color(0xFFFFAAAA)) {
                                    Column {
                                        Text("An Error occurred while saving article")
                                        Text("Please try again")
                                    }
                                }
                            }
                        }
                    }
                }, onLongPress = { savingResult = Random.nextInt(0, 3) })
            }
        }
    }
}

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun ExpandableCardLayout(
    onLongPress: ((Offset) -> Unit)? = null,
    content: @Composable() ColumnScope.() -> Unit,
    extendedContent: @Composable() () -> Unit
) {
    var extended by remember { mutableStateOf(false) }
    ListCardElement(onClick = { extended = !extended }, onLongPress = onLongPress) {
        Column(Modifier.padding(16.dp)) {
            content()

            AnimatedVisibility(extended) {
                extendedContent()
            }
        }
    }
}

@Composable
fun ListCardElement(onClick: (() -> Unit)? = null, onLongPress: ((Offset) -> Unit)? = null, content: @Composable () -> Unit) {
    Card(
        Modifier
            .padding(horizontal = 16.dp)
            .clip(RoundedCornerShape(8.dp))
            .fillMaxWidth()
            .padding(4.dp)
            .run { onClick?.let { clickable(onClick = it) } ?: this }
            .run { onLongPress?.let { longPressGestureFilter(it) } ?: this }, elevation = 4.dp
    ) {
        content()
    }
}