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.title) },
                                    selected = currentRoute == screen.route,
                                    onClick = {
                                        navController.navigate(screen.route) {
                                            popUpTo(navController.graph.startDestinationId)
                                            launchSingleTop = true
                                        }
                                    }
                                )
                            }
                        }
                    },
                    content = { paddingValues ->
                        val navHostController = navController as NavHostController
                        NavigationHost(
                            navController = navHostController,
                            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)
    }

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

    }
} -> this is my MainActivity but  bottom navigation bar and scaffold causes issues. -> these are another codes for bottom navigation and it is working. ->package com.talhaoz.loginbottombarapp.ui.bottombar

import androidx.compose.material.Scaffold
import androidx.compose.material.rememberScaffoldState
import androidx.compose.runtime.Composable
import androidx.navigation.NavController
import com.talhaoz.loginbottombarapp.navigation.NavigationHost

@Composable
fun AppScaffold(
    navController: NavController,
    logout: () -> Unit
) {
    val scaffoldState = rememberScaffoldState()

    Scaffold(
        bottomBar = {
            BottomBar(navController = navController)
        },
        scaffoldState = scaffoldState,

        ) {

        NavigationHost(navController = navController) {
            logout()
        }
    }

},package com.talhaoz.loginbottombarapp.ui.bottombar

import androidx.compose.material.BottomNavigation
import androidx.compose.material.BottomNavigationItem
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import androidx.navigation.compose.currentBackStackEntryAsState
import com.talhaoz.loginbottombarapp.navigation.NavigationScreen


@Composable
fun BottomBar(navController: NavController) {

    val items = listOf(
        NavigationScreen.HomeScreen,
        NavigationScreen.ProfileScreen,
        NavigationScreen.SettingsScreen,
    )

    BottomNavigation(
        elevation = 5.dp,
    ) {
        val navBackStackEntry by navController.currentBackStackEntryAsState()
        val currentRoute = navBackStackEntry?.destination?.route
        items.map {
            BottomNavigationItem(
                icon = {
                    Icon(
                        painter = painterResource(id = it.icon),
                        contentDescription = it.title
                    )
                },
                label = {
                    Text(
                        text = it.title
                    )
                },
                selected = currentRoute == it.route,
                selectedContentColor = Color.White,
                unselectedContentColor = Color.White.copy(alpha = 0.4f),
                onClick = {
                    navController.navigate(it.route) {
                        navController.graph.startDestinationRoute?.let { route ->
                            popUpTo(route) {
                                saveState = true
                            }
                        }
                        restoreState = true
                        launchSingleTop = true
                    }
                },

                )
        }

    }
},package com.talhaoz.loginbottombarapp.ui.bottombar

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp

@Composable
fun HomeScreen() {

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colors.background)
    ) {
        Text(
            text = "Home",
            fontWeight = FontWeight.Bold,
            color = MaterialTheme.colors.primary,
            modifier = Modifier.align(Alignment.Center),
            fontSize = 20.sp
        )
    }
},package com.talhaoz.loginbottombarapp.ui.bottombar

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp

@Composable
fun ProfileScreen() {

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colors.background)
    ) {
        Text(
            text = "Profile",
            fontWeight = FontWeight.Bold,
            color = MaterialTheme.colors.primary,
            modifier = Modifier.align(Alignment.Center),
            fontSize = 20.sp
        )
    }
}. -> I want you to apply the second bottom navigation bar prencible to my initial code. So i can use it like this. Explain me how to do it and write the code for me