Custom ListView in Android using Jetpack Compose

package com.geeksforgeeks.demo

data class Model(
    val name: String,
    val image: Int
)

package com.geeksforgeeks.demo

import android.os.Bundle
import android.widget.Toast
import androidx.activity.*
import androidx.activity.compose.*
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.*
import androidx.compose.ui.graphics.*
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.*
import com.geeksforgeeks.demo.ui.theme.DemoTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DemoTheme(dynamicColor = false, darkTheme = false) {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = Color.White
                ) {
                    CustomListView()
                }
            }
        }
    }
}

@Composable
fun CustomListView() {

    val context = LocalContext.current
    val list = ArrayList<Model>()

    list.add(Model("Android", R.drawable.gfg_logo))
    list.add(Model("JavaScript", R.drawable.gfg_logo))
    list.add(Model("Python", R.drawable.gfg_logo))
    list.add(Model("C++", R.drawable.gfg_logo))
    list.add(Model("C#", R.drawable.gfg_logo))
    list.add(Model("Java", R.drawable.gfg_logo))
    list.add(Model("Node Js", R.drawable.gfg_logo))
    list.add(Model("Kotlin", R.drawable.gfg_logo))
    list.add(Model("Web Development", R.drawable.gfg_logo))
    list.add(Model("Machine Learning", R.drawable.gfg_logo))
    list.add(Model("Rust", R.drawable.gfg_logo))
    list.add(Model("Go", R.drawable.gfg_logo))
    list.add(Model("PHP", R.drawable.gfg_logo))
    list.add(Model("Flutter", R.drawable.gfg_logo))

    LazyColumn {
        itemsIndexed(list) { index, _ ->
            Card (
                onClick = {
                    Toast.makeText(context, list[index].name + " selected..", Toast.LENGTH_SHORT).show()
                },
                modifier = Modifier.padding(start = 24.dp, top = 24.dp, end = 24.dp).fillMaxWidth(),
                elevation = CardDefaults.cardElevation(12.dp),
                colors = CardDefaults.cardColors(MaterialTheme.colorScheme.onPrimary)
            ) {
                Row(modifier = Modifier.padding(8.dp).fillMaxWidth()) {
                    Spacer(modifier = Modifier.width(5.dp))
                    Image(
                        painter = painterResource(id = list[index].image),
                        contentDescription = null,
                        modifier = Modifier
                            .height(80.dp)
                            .width(80.dp)
                            .padding(16.dp)
                    )
                    Spacer(modifier = Modifier.width(5.dp))
                    Text(
                        text = list[index].name,
                        modifier = Modifier
                            .padding(start = 16.dp)
                            .align(Alignment.CenterVertically),
                        color = Color.Black, textAlign = TextAlign.Center
                    )
                }
            }
        }
    }
}