First Android app: Android Basics with Compose

[isaacsgraphic]

URL of codelab

https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app?continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fandroid-basics-compose-unit-1-pathway-2%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fbasic-android-kotlin-compose-first-app#4

In which task and step of the codelab can this issue be found?
step 3, replacing Box with Surface.

Describe the problem
Surface doesn't yet have an import to support it. As a result, it shows up red, and I get some errors:

"Unresolved reference: Surface"
"@composable invocations can only happen from the context of a @composable function"

I checked that the section is identical to the code provided, I even copied and pasted the section of code directly from the tutorial. Android studio has only just been installed, everything else worked up until that point.

EDIT: Only after a bunch of other troubleshooting and writing out this app issue form did I find the "show quick fixes" tooltip on the error, and tried adding the import @composable Surface, to eventually get it working. THEN I read a few more steps in the tutorial and read about how sometimes a thing is not supported and needs an import adding. This information just a few steps earlier would have saved me a lot of time. I think it's worth including this information earlier in the tutorial, and showing the example code in red with the error which shows up so you can explain the error and users don't think they've made a mistake or need to resolve an issue before continuing the tutorial.

Steps to reproduce?
simply follow step 3 of the tutorial. Everything worked up to that point (though earlier I did have to resolve some kind of version mistake to get the preview panel working. I found this post and followed the solution, which worked)

Here's my full code for the Main.kt file.

package com.example.greetingcard

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.greetingcard.ui.theme.GreetingCardTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            GreetingCardTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Surface() {
        Text(
            text = "Hi, my name is $name!",
            modifier = modifier
        )
    }
}


@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    GreetingCardTheme {
        Greeting("Geoff")
    }
}

Versions
Android Studio version: 2024.2.1.12
API version of the emulator: Medium phone API 35. Hope this is the correct info, sorry, I'm so green I don't know how to look this up.

Additional information
Include screenshots if they would be useful in clarifying the problem.