Challenge 3: Composing Composables Together — Solution

@Composable
fun ProductCard(name: String, price: Double) {
    Column(modifier = Modifier.padding(16.dp)) {
        Text(text = name, fontSize = 18.sp)
        Text(text = "$$price", color = Color.Gray)
    }
}

@Composable
fun ProductList() {
    Column {
        ProductCard(name = "Keyboard", price = 49.99)
        Spacer(modifier = Modifier.height(12.dp))
        ProductCard(name = "Mouse", price = 19.99)
        Spacer(modifier = Modifier.height(12.dp))
        ProductCard(name = "Monitor", price = 179.99)
    }
}

@Preview(showBackground = true)
@Composable
fun ProductListPreview() {
    ProductList()
}

Notes:
- ProductList is itself just a composable function that calls
  ProductCard three times — composables combine by simply calling other
  composables, exactly like regular functions calling other functions.
- Spacer(modifier = Modifier.height(12.dp)) adds vertical gap between
  items inside the Column — Compose's equivalent of a margin between
  stacked elements, since Column doesn't add spacing between children
  automatically.
- ProductListPreview requires no parameters, following the same
  no-argument @Preview pattern as Challenge 1 — this works at any level
  of composition, whether previewing one small composable or an entire
  screen built from several.