Composable Functions Explained

@Composable
fun PriceTag(
    pricePaise: Long,                       // 1. required data first
    modifier: Modifier = Modifier,          // 2. first optional parameter: modifier
    discounted: Boolean = false,            // 3. other optional parameters with defaults
    onClick: (() -> Unit)? = null,          // 4. events as lambdas
) {
    val text = remember(pricePaise) { formatRupees(pricePaise) }   // cache derived values
    Surface(
        modifier = modifier.then(if (onClick != null) Modifier.clickable(onClick = onClick) else Modifier),
        color = if (discounted) MaterialTheme.colorScheme.tertiaryContainer else MaterialTheme.colorScheme.surface,
        shape = RoundedCornerShape(8.dp),
    ) {
        Text(text, Modifier.padding(horizontal = 8.dp, vertical = 4.dp), style = MaterialTheme.typography.labelLarge)
    }
}

@Composable
fun ArticleScreen(id: String, viewModel: ArticleViewModel) {
    // ❌ Runs on every recomposition: duplicate analytics events and requests
    analytics.log("article_viewed", id)
    viewModel.load(id)

    // ✅ Runs when entering composition, and again only if id changes
    LaunchedEffect(id) {
        analytics.log("article_viewed", id)
        viewModel.load(id)
    }
}

@Composable
fun SectionCard(
    title: String,
    modifier: Modifier = Modifier,
    action: (@Composable () -> Unit)? = null,     // optional slot
    content: @Composable ColumnScope.() -> Unit,  // trailing content slot with ColumnScope receiver
) {
    Card(modifier.fillMaxWidth()) {
        Column(Modifier.padding(16.dp)) {
            Row(verticalAlignment = Alignment.CenterVertically) {
                Text(title, style = MaterialTheme.typography.titleMedium, modifier = Modifier.weight(1f))
                action?.invoke()
            }
            Spacer(Modifier.height(8.dp))
            content()
        }
    }
}

// Usage
SectionCard(title = "Recent orders", action = { TextButton(onClick = onSeeAll) { Text("See all") } }) {
    orders.take(3).forEach { OrderRow(it) }
}

Box(Modifier.padding(16.dp).background(Color.Yellow))   // padding outside: yellow area excludes padding
Box(Modifier.background(Color.Yellow).padding(16.dp))   // background first: yellow includes padding
Box(Modifier.clickable { }.padding(16.dp))              // whole padded area is clickable
Box(Modifier.padding(16.dp).clickable { })              // only the inner area is clickable

@Preview(name = "Light", showBackground = true)
@Preview(name = "Dark", uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
@Preview(name = "Large font", fontScale = 1.5f, showBackground = true)
@Composable
private fun PriceTagPreview() {
    AppTheme { PriceTag(pricePaise = 129_900, discounted = true) }
}