E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.example.musicapp, PID: 24136
    java.lang.IllegalArgumentException: Navigation destination that matches request NavDeepLinkRequest{ uri=android-app://androidx.navigation/songDetail/2011995197 } cannot be found in the navigation graph NavGraph(0x0) startDestination={Destination(0x245ddaf4) route=musicCategories}
        at androidx.navigation.NavController.navigate(NavController.kt:1664)
        at androidx.navigation.NavController.navigate(NavController.kt:1984)
        at androidx.navigation.NavController.navigate$default(NavController.kt:1979)
        at com.example.musicapp.Interface.AlbumDetailScreenKt$AlbumDetailItem$1.invoke(AlbumDetailScreen.kt:84)
        at com.example.musicapp.Interface.AlbumDetailScreenKt$AlbumDetailItem$1.invoke(AlbumDetailScreen.kt:83)
        at androidx.compose.foundation.ClickableKt$clickable$4$gesture$1$1$2.invoke-k-4lQ0M(Clickable.kt:167)
        at androidx.compose.foundation.ClickableKt$clickable$4$gesture$1$1$2.invoke(Clickable.kt:156)
        at androidx.compose.foundation.gestures.TapGestureDetectorKt$detectTapAndPress$2$1.invokeSuspend(TapGestureDetector.kt:255)
        at kotlin.coroutines.jvm.internal.BaseContinuationImpl.resumeWith(ContinuationImpl.kt:33)
        at kotlinx.coroutines.DispatchedTaskKt.resume(DispatchedTask.kt:178)
        at kotlinx.coroutines.DispatchedTaskKt.dispatch(DispatchedTask.kt:166)
        at kotlinx.coroutines.CancellableContinuationImpl.dispatchResume(CancellableContinuationImpl.kt:397)
        at kotlinx.coroutines.CancellableContinuationImpl.resumeImpl(CancellableContinuationImpl.kt:431)
        at kotlinx.coroutines.CancellableContinuationImpl.resumeImpl$default(CancellableContinuationImpl.kt:420)
        at kotlinx.coroutines.CancellableContinuationImpl.resumeWith(CancellableContinuationImpl.kt:328)
        at androidx.compose.ui.input.pointer.SuspendingPointerInputFilter$PointerEventHandlerCoroutine.offerPointerEvent(SuspendingPointerInputFilter.kt:566)
        at androidx.compose.ui.input.pointer.SuspendingPointerInputFilter.dispatchPointerEvent(SuspendingPointerInputFilter.kt:456)
        at androidx.compose.ui.input.pointer.SuspendingPointerInputFilter.onPointerEvent-H0pRuoY(SuspendingPointerInputFilter.kt:469)
        at androidx.compose.ui.node.BackwardsCompatNode.onPointerEvent-H0pRuoY(BackwardsCompatNode.kt:374)
        at androidx.compose.ui.input.pointer.Node.dispatchMainEventPass(HitPathTracker.kt:314)
        at androidx.compose.ui.input.pointer.Node.dispatchMainEventPass(HitPathTracker.kt:301)
        at androidx.compose.ui.input.pointer.Node.dispatchMainEventPass(HitPathTracker.kt:301)
-> @Composable
fun AlbumDetailItem(song: Song, navController: NavController, playerViewModel: PlayerViewModel) {
    val context = LocalContext.current

    Row(
        modifier = Modifier
            .padding(horizontal = 16.dp, vertical = 8.dp)
            .background(
                color = Color.Black.copy(alpha = 0.5f),
                shape = RoundedCornerShape(8.dp)
            )
            .border(
                width = 1.dp,
                color = Color.LightGray,
                shape = RoundedCornerShape(8.dp)
            )
            .clickable(onClick = {
                navController.navigate("songDetail/${song.id}")
            })
    ) {
        val painter = rememberAsyncImagePainter(model = song.album.cover_medium)
        Image(
            painter = painter,
            contentDescription = song.title,
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .size(100.dp)
                .align(Alignment.CenterVertically)
        )

        Column(
            modifier = Modifier
                .weight(1f)
                .padding(start = 16.dp)
                .align(Alignment.CenterVertically)
        ) {
            Text(
                text = song.title ?: "Unknown title",
                style = MaterialTheme.typography.subtitle1,
                color = Color.White
            )
            Text(
                text = "${song.duration}" ?: "Unknown duration",
                style = MaterialTheme.typography.caption,
                color = Color.White
            )
        }

        IconButton(
            onClick = {
                if (playerViewModel.currentSong.value?.id == song.id) {
                    if (playerViewModel.isPlaying.value) {
                        playerViewModel.pauseSong()
                    } else {
                        playerViewModel.resumeSong()
                    }
                } else {
                    playerViewModel.playSong(context, song)
                }
            },
            modifier = Modifier
                .align(Alignment.CenterVertically)
                .padding(8.dp)

        ) {
            Icon(
                painter = painterResource(id = if (playerViewModel.currentSong.value?.id == song.id && playerViewModel.isPlaying.value) R.drawable.pause else R.drawable.play_buttton),
                contentDescription = if (playerViewModel.currentSong.value?.id == song.id && playerViewModel.isPlaying.value) "Pause" else "Play",
                modifier = Modifier.size(24.dp)
            )
        }
    }
} -> i had that error , when clicked to album detail item composable. Playing and stopping song with the icon is fine but i don't want a onclick action for album detail item. ->package com.example.musicapp.Interface

import MusicCategoriesScreen
import TopBar
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import com.example.musicapp.ui.theme.MusicAppTheme
import com.example.musicapp.R
import com.example.musicapp.ViewModel.CategoriesViewModel
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MusicAppTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    MainScreen()
                }
            }
        }
    }
}
@Composable
fun FirstScreen(modifier: Modifier = Modifier) {
    val categoriesViewModel: CategoriesViewModel = viewModel()
    val categories by categoriesViewModel.categories.collectAsState()
    Scaffold(
        content = { padding ->
            Column(
                modifier = modifier.padding(padding)
            ) {
                // Add your UI components here
                MusicCategoriesScreen(categories = categories, topBar = { TopBar(title = "Music Categories") })
            }
        }
    )
}


@Composable
fun SecondScreen(modifier: Modifier = Modifier) {
    Scaffold(
        topBar = {
            // No top bar title
        },
        content = { padding ->
            Column(
                modifier = modifier.padding(padding)
            ) {
                Text(text = "This is the second screen")
            }
        }
    )
}


/*
@Composable
fun MainScreen() {
    val navController = rememberNavController()

    NavHost(navController, startDestination = "musicCategories") {
        composable("musicCategories") {
        val categoriesViewModel: CategoriesViewModel = viewModel()
        val categories by categoriesViewModel.categories.collectAsState()

        MusicCategoriesScreen(
            categories = categories,
            onCategorySelected = { category ->
                navController.navigate("artistsDetail/${category.id}")
            },
            topBar = { TopBar(title = "Music Categories") }
        )
    }
        composable("artistsDetail/{categoryId}") { backStackEntry ->
        val categoryId = backStackEntry.arguments?.getString("categoryId")?.toIntOrNull()
        if (categoryId != null) {
            ArtistsScreen(navController, categoryId)
        }
    }
    }
}

 */
@Composable
fun MainScreen() {
    val navController = rememberNavController()

    NavHost(navController, startDestination = "musicCategories") {
        composable("musicCategories") {
        val categoriesViewModel: CategoriesViewModel = viewModel()
        val categories by categoriesViewModel.categories.collectAsState()

        MusicCategoriesScreen(
            categories = categories,
            onCategorySelected = { category ->
                navController.navigate("artistsDetail/${category.id}")
            },
            topBar = { TopBar(title = "Music Categories") }
        )
    }
        composable("artistsDetail/{categoryId}") { backStackEntry ->
        val categoryId = backStackEntry.arguments?.getString("categoryId")?.toIntOrNull()
        if (categoryId != null) {
            ArtistsScreen(navController, categoryId)
        }
    }
        composable("artistDetail/{artistId}") { backStackEntry ->
        val artistId = backStackEntry.arguments?.getString("artistId")?.toIntOrNull()
        if (artistId != null) {
            ArtistDetailScreen(artistId, navController)
        }
    }

        composable("albumDetail/{albumId}") { backStackEntry ->
        val albumId = backStackEntry.arguments?.getString("albumId")?.toIntOrNull()
        if (albumId != null) {
            AlbumDetailScreen(albumId,navController)
        }
    }
    }
}


@Composable
fun BottomBar(selectedScreen: Int, onItemSelected: (Int) -> Unit) {
    BottomAppBar {
        BottomNavigationItem(
            icon = { Icon(painterResource(R.drawable.music_symbol), contentDescription = null) },
            selected = selectedScreen == 0,
            onClick = { onItemSelected(0) }
        )
        BottomNavigationItem(
            icon = { Icon(painterResource(R.drawable.heart_empty), contentDescription = null) },
            selected = selectedScreen == 1,
            onClick = { onItemSelected(1) }
        )
    }
}

/*
@Composable
fun MainScreen() {
    val selectedScreen = remember { mutableStateOf(0) }
    Scaffold(
        bottomBar = { BottomBar(selectedScreen.value, onItemSelected = { index -> selectedScreen.value = index }) },
        content = { padding ->
            when (selectedScreen.value) {
                0 -> FirstScreen(modifier = Modifier.padding(padding))
                1 -> SecondScreen(modifier = Modifier.padding(padding))
            }
        }
    )
}
 */
this is also my main activity