//Step1: Implement these 3 Dependencies in build.gradle.kts(Module:app)

implementation("androidx.lifecycle:lifecycle-viewmodel-ktx:2.8.5")
implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5")
implementation("androidx.compose.material3:material3:1.3.0")

//Step2: Create CounterViewModel.kt

package com.example.incrementviewmodel

import androidx.lifecycle.ViewModel
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow

class CounterViewModel: ViewModel(){
    //Mutable State Flow to hold the counter value
    //StateFlow is a read only data stream
    private val _counter = MutableStateFlow(0)
    val counter : StateFlow<Int> = _counter

    fun incrementcounter(){
        _counter.value +=1
    }
}

//MainActivity.kt

package com.example.incrementviewmodel

import android.os.Bundle
import androidx.compose.foundation.layout.*//Import compose layout
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.lifecycle.ViewModel

import androidx.lifecycle.viewmodel.compose.viewModel//Import this

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            display()
        }
    }
}

@Composable
fun display(counterViewModel: CounterViewModel = viewModel()){
    val counterState = counterViewModel.counter.collectAsState()
    Column( modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = "Counter: ${counterState.value}")
        Spacer(modifier = Modifier.height(30.dp))
        Button(onClick = {counterViewModel.incrementcounter()}) {
            Text(text = "Increment")
        }
    }
}