@Composable
fun ParkView(parkId: String, viewModel: ParkViewModel = ParkViewModel(context = LocalContext.current, parkId = parkId)) {
    val park by viewModel.park.collectAsState()
    val scrollState = rememberScrollState()

    val tabIndex by viewModel.tabIndex.collectAsState()
    val tabTitles = listOf("1", "2")

    Column(modifier = Modifier.scrollable(scrollState, Orientation.Vertical)) {
        if (park != null) {
            val park = park!!

            Text(text = park.title ?: "")

            TabRow(selectedTabIndex = tabIndex) { // 3.
                tabTitles.forEachIndexed { index, title ->
                    Tab(selected = tabIndex == index, // 4.
                        onClick = { viewModel.tabIndex.value = index },
                        text = { Text(text = title) }) // 5.
                }
            }

            when (tabIndex) { // 6.
                0 -> Text("1 content")
                1 -> Text("2 content")
            }
        }
    }
}

class ParkViewModel(
    val context: Context,
    val parkId: String
): ViewModel() {

    private val _park = MutableStateFlow<QLPark?>(null)
    val park: StateFlow<QLPark?> get() = _park

    val tabIndex = MutableStateFlow<Int>(value = 0)

    init {
        viewModelScope.launch {
            fetchPark()
        }
    }

    private suspend fun fetchPark() {
        // This is an asynchronous network call, and ultimately what it does is getting a new park and setting the park property
        _park.value = newPark
    }

}