import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.lifecycle.ViewModelStore
import androidx.navigation.NavController
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController
import com.example.deezermusicplayer.Category
import com.example.deezermusicplayer.Screen
import com.example.deezermusicplayer.ui.theme.DeezerMusicPlayerTheme

class MainActivity : ComponentActivity() {
    private val bottomNavigationItems = listOf(
        Screen.Home,
        Screen.Favorites
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DeezerMusicPlayerTheme {
                // Set up navigation
                val navController = rememberNavController()

                Scaffold(
                    bottomBar = {
                        BottomNavigation {
                            val navBackStackEntry by navController.currentBackStackEntryAsState()
                            val currentRoute = navBackStackEntry?.destination?.route
                            bottomNavigationItems.forEach { screen ->
                                BottomNavigationItem(
                                    icon = { Icon(Icons.Default.Home, contentDescription = null) }, // Set your custom icons here
                                    label = { Text(screen.name) },
                                    selected = currentRoute == screen.route,
                                    onClick = {
                                        navController.navigate(screen.route) {
                                            popUpTo(navController.graph.startDestinationId)
                                            launchSingleTop = true
                                        }
                                    }
                                )
                            }
                        }
                    },
                    content = { paddingValues ->
                        NavigationHost(
                            navController = navController,
                            modifier = Modifier.padding(paddingValues)
                        )
                    }
                )
            }
        }
    }

    @Composable
    fun NavigationHost(
        navController: NavController,
        modifier: Modifier = Modifier,
    ) {
        val categoriesViewModel = remember { CategoriesViewModel() }
        val categories by categoriesViewModel.categories.collectAsState()

        if (navController is NavHostController) {
            navController.setViewModelStore(ViewModelStore())
        }

        NavHost(navController = navController as NavHostController, startDestination = Screen.Home.route) {
            composable(Screen.Home.route) {
                HomeScreen(categories = categories, navController = navController, modifier = modifier)
            }
            composable(Screen.Favorites.route) {
                FavoritesScreen(categories = categories, navController = navController, modifier = modifier)
            }
        }
    }

    @Composable
    fun HomeScreen(
        categories: List<Category>,
        navController: NavController,
        modifier: Modifier = Modifier
    ) {
        // HomeScreen content goes here (not the Scaffold)
        MusicCategoriesScreen(categories = categories) { category ->
            // Handle the selected category here
        }
    }

    @Composable
    fun FavoritesScreen(categories: List<Category>, navController: NavController, modifier: Modifier = Modifier) {

    }
},import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import coil.compose.rememberImagePainter
import com.example.deezermusicplayer.Category

@Composable
fun MusicCategoriesScreen(
    categories: List<Category>,
    onCategorySelected: (Category) -> Unit,
    modifier: Modifier = Modifier
) {
    LazyColumn(
        modifier = modifier,
        contentPadding = PaddingValues(16.dp)
    ) {
        items(categories) { category ->
            CategoryItem(category) {
                onCategorySelected(category)
            }
        }
    }
}

@Composable
private fun CategoryItem(category: Category, onClick: () -> Unit) {
    Column(
        modifier = Modifier
            .clickable(onClick = onClick)
            .fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        val painter = rememberImagePainter(
            data = category.picture_medium
        )

        Image(
            painter = painter,
            contentDescription = category.name,
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .fillMaxWidth()
                .height(120.dp)
        )

        Text(
            text = category.name,
            modifier = Modifier
                .padding(top = 8.dp)
                .align(Alignment.CenterHorizontally),
            style = MaterialTheme.typography.body2,
            color = MaterialTheme.colors.onSurface
        )
    }
},package com.example.deezermusicplayer

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.ui.graphics.vector.ImageVector

sealed class Screen(val route: String, val title: String, val icon: ImageVector) {
    object Home : Screen("home", "Home", Icons.Filled.Home)
    object Favorites : Screen("favorites", "Favorites", Icons.Filled.Favorite)
}. These are some of my classes separated with "," .    MusicCategoriesScreen(categories = categories) { category ->
            // Handle the selected category here
        } -> this part in the MainActivity.kt gives me error. I just want to observe MusicCategoriesScreen composable in the HomeScreen composable when the app starts. I don't want to do anything yet when user clicks a category so can you make the necessary changes for me