How to Generate Jetpack Compose UI with AI

Create a Jetpack Compose screen matching the attached design.
Constraints:
- Stateless composable `OrderSummaryContent(state: OrderSummaryUiState, onPay: () -> Unit, onEditAddress: () -> Unit, modifier: Modifier = Modifier)`.
- Define `OrderSummaryUiState` as an immutable data class with only the fields the UI needs.
- Use MaterialTheme colorScheme, typography and shapes only (no hard-coded colors or font sizes).
- Use stringResource placeholders for user-facing text (list the string keys at the end).
- Content descriptions for icons; touch targets at least 48dp.
- Use LazyColumn for the item list with stable keys.
- Add @Preview for light, dark and fontScale 1.5 with realistic sample data.
Don't add ViewModels, navigation or networking.

@Composable
fun OrderSummary() {
    var items by remember { mutableStateOf(listOf("Mug", "T-shirt")) }      // ❌ state owned here, fake data
    Column(Modifier.padding(16.dp).background(Color(0xFFF5F5F5))) {          // ❌ hard-coded color
        Text("Order Summary", fontSize = 22.sp, fontWeight = FontWeight.Bold) // ❌ hard-coded typography
        items.forEach { Text(it) }                                            // ❌ not lazy, no keys
        Icon(Icons.Default.Edit, contentDescription = null,                    // ❌ no description, tiny target
            modifier = Modifier.size(16.dp).clickable { })
        Button(onClick = { }) { Text("Pay ₹1,298") }                          // ❌ action not hoisted
    }
}

data class OrderSummaryUiState(val items: List<OrderLineUi>, val totalText: String, val address: String)
data class OrderLineUi(val id: String, val name: String, val priceText: String)

@Composable
fun OrderSummaryContent(
    state: OrderSummaryUiState,
    onPay: () -> Unit,
    onEditAddress: () -> Unit,
    modifier: Modifier = Modifier,
) {
    Column(modifier.fillMaxSize().background(MaterialTheme.colorScheme.surface).padding(16.dp)) {
        Text(stringResource(R.string.order_summary_title), style = MaterialTheme.typography.headlineSmall)
        LazyColumn(Modifier.weight(1f).padding(vertical = 8.dp)) {
            items(state.items, key = { it.id }) { line ->
                ListItem(headlineContent = { Text(line.name) }, trailingContent = { Text(line.priceText) })
            }
        }
        Row(verticalAlignment = Alignment.CenterVertically) {
            Text(state.address, Modifier.weight(1f), style = MaterialTheme.typography.bodyMedium)
            IconButton(onClick = onEditAddress) {                                   // 48dp target by default
                Icon(Icons.Default.Edit, contentDescription = stringResource(R.string.edit_address))
            }
        }
        Button(onClick = onPay, modifier = Modifier.fillMaxWidth()) {
            Text(stringResource(R.string.pay_amount, state.totalText))
        }
    }
}