In my project when a user clicks a category item from MusicCategoriesScreen composable -> it should go to the Artist Detail Composable ( create it for me ), Artist Detail Composable will have the same structure for MusicCategoriesScreen and category item. Currently these are my classes and i tried to use MVVM. I will give you the deezer api key for Artist Detail and i want you to create necessary classes and functions with the same structure of my project. Explain the steps and create the codes for me.  This is the api key for Artist Detail -> https://api.deezer.com/genre/{genre_id}/artists , Now these are my current classes - >package com.example.musicapp.Data



data class Category(
    val id: Int,
    val name: String,
    val picture_medium: String
),package com.example.musicapp.Data

import okhttp3.OkHttpClient
import okhttp3.logging.HttpLoggingInterceptor
import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory
import retrofit2.http.GET

interface DeezerApiService {
    @GET("genre")
    suspend fun getGenres(): DeezerResponse<Category>

    companion object {
        private const val BASE_URL = "https://api.deezer.com/"

        fun create(): DeezerApiService {
            val client = OkHttpClient.Builder()
                .addInterceptor(HttpLoggingInterceptor().apply {
                    level = HttpLoggingInterceptor.Level.BODY
                })
                .build()

            return Retrofit.Builder()
                .baseUrl(BASE_URL)
                .client(client)
                .addConverterFactory(GsonConverterFactory.create())
                .build()
                .create(DeezerApiService::class.java)
        }
    }
},package com.example.musicapp.Data

class DeezerRepository {
    private val deezerApiService = DeezerApiService.create()
    suspend fun getCategories(): List<Category> {
        val response = deezerApiService.getGenres()
        return response.data.map { category ->
            Category(category.id, category.name, category.picture_medium)
        }
    }
},package com.example.musicapp.Data

data class DeezerResponse<T>(
    val data: List<T>
),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


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 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))
            }
        }
    )
}


@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) }
        )
    }
},import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import coil.compose.rememberAsyncImagePainter
import coil.compose.rememberImagePainter
import com.example.musicapp.Data.Category

@Composable
fun MusicCategoriesScreen(
    categories: List<Category>,
    onCategorySelected: (Category) -> Unit = {},
    topBar: @Composable () -> Unit,
    modifier: Modifier = Modifier
) {
    Column(
        modifier = modifier
    ) {
        topBar()

        LazyVerticalGrid(
            columns = GridCells.Fixed(2),
            contentPadding = PaddingValues(16.dp)
        ) {
            items(categories) { category ->
                CategoryItem(category) {
                    onCategorySelected(category)
                }
            }
        }
    }
}

@Composable
fun TopBar(title: String) {
    TopAppBar(
        title = {
            Text(
                title,
                textAlign = TextAlign.Center,
                modifier = Modifier.fillMaxWidth()
            )
        }
    )
}

@Composable
private fun CategoryItem(category: Category, onClick: () -> Unit) {
    Surface(
        modifier = Modifier
            .padding(8.dp)
            .clickable(onClick = onClick)
            .aspectRatio(1f),
        shape = RoundedCornerShape(8.dp),
        elevation = 4.dp,
        border = BorderStroke(width = 1.dp, color = Color.LightGray)
    ) {
        Box(
            modifier = Modifier.fillMaxSize()
        ) {
            val painter = rememberAsyncImagePainter(model = category.picture_medium)

            Image(
                painter = painter,
                contentDescription = category.name,
                contentScale = ContentScale.Crop,
                modifier = Modifier.fillMaxSize()
            )

            Text(
                text = category.name,
                modifier = Modifier
                    .align(Alignment.BottomCenter)
                    .background(color = Color.Black.copy(alpha = 0.7f))
                    .fillMaxWidth()
                    .padding(4.dp),
                style = MaterialTheme.typography.body2,
                color = Color.White, // Change the text color to white
                textAlign = TextAlign.Center
            )
        }
    }
},package com.example.musicapp.Interface

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)
},package com.example.musicapp.ViewModel

import android.util.Log
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import com.example.musicapp.Data.Category
import com.example.musicapp.Data.DeezerRepository
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.launch
class CategoriesViewModel : ViewModel() {
    private val deezerRepository = DeezerRepository()
    private val _categories = MutableStateFlow<List<Category>>(emptyList())
    val categories: StateFlow<List<Category>>
        get() = _categories

    init {
        fetchCategories()
    }

    private fun fetchCategories() {
        viewModelScope.launch {
            try {
                val categories = deezerRepository.getCategories()
                _categories.value = categories
            } catch (e: Exception) {
                Log.e("CategoriesViewModel", "Failed to fetch categories: ${e.message}")
            }
        }
    }

    // public function to fetch categories
    fun refreshCategories() {
        fetchCategories()
    }
}-> separated classes with "," Now before you do what i asked. You can ask any questions you need. Also remember the adding navigation with jetpack compose so when category item clicked, it will goes to the ArtistDetailScreen composable ,package com.example.musicapp.Data.Repository

import com.example.musicapp.Data.Artist

class ArtistRepository {
    private val deezerApiService = DeezerApiService.create()

    suspend fun getArtists(genreId: Int): List<Artist> {
        val response = deezerApiService.getArtists(genreId)
        return response.data
    }
}
,package com.example.musicapp.Data.Repository

import com.example.musicapp.Data.Artist
import com.example.musicapp.Data.Category
import okhttp3.OkHttpClient
import okhttp3.logging.HttpLoggingInterceptor
import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory
import retrofit2.http.GET
import retrofit2.http.Path

interface DeezerApiService {
    @GET("genre")
    suspend fun getGenres(): DeezerResponse<Category>

    @GET("genre/{genre_id}/artists")
    suspend fun getArtists(@Path("genre_id") genreId: Int): DeezerResponse<Artist>

    companion object {
        private const val BASE_URL = "https://api.deezer.com/"

        fun create(): DeezerApiService {
            val client = OkHttpClient.Builder()
                .addInterceptor(HttpLoggingInterceptor().apply {
                    level = HttpLoggingInterceptor.Level.BODY
                })
                .build()

            return Retrofit.Builder()
                .baseUrl(BASE_URL)
                .client(client)
                .addConverterFactory(GsonConverterFactory.create())
                .build()
                .create(DeezerApiService::class.java)
        }
    }


},package com.example.musicapp.Data

data class Artist(
    val id: Int,
    val name: String,
    val picture_medium: String
)
-> already added these extra classes . So consider these too when creating necessary classes and guiding me with the solution