package com.suno.android.common_ui.components.menus import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Icon import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.res.vectorResource import androidx.compose.ui.tooling.preview.PreviewLightDark import androidx.compose.ui.unit.dp import com.suno.android.common_ui.theme.ExtendedTheme import com.suno.android.common_ui.theme.SunoTheme @Composable fun ModelSelectorDropdownItem( modelSelectorDropdownState: ModelSelectorDropdownState, onClick: () -> Unit, modifier: Modifier = Modifier, ) { Row( modifier = modifier .background( if (modelSelectorDropdownState.isSelected) { ExtendedTheme.colors.textPrimary.copy(alpha = 0.04f) } else { Color.Transparent }, ) .clickable { onClick.invoke() } .padding(12.dp), horizontalArrangement = Arrangement.spacedBy(8.dp), verticalAlignment = Alignment.CenterVertically, ) { Column( modifier = Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(8.dp), ) { Row( horizontalArrangement = Arrangement.spacedBy(4.dp), verticalAlignment = Alignment.CenterVertically, ) { Text( text = modelSelectorDropdownState.title, style = ExtendedTheme.typography.smallBody, color = if (modelSelectorDropdownState.title == "v5") { com.suno.android.common_ui.theme.AukPink } else { ExtendedTheme.colors.textPrimary }, ) if (modelSelectorDropdownState.showBetaBadge) { Text( modifier = Modifier .background( color = Color.White.copy(alpha = 0.04f), shape = RoundedCornerShape(14.dp), ) .padding(horizontal = 6.dp, vertical = 2.dp), text = "Beta", style = ExtendedTheme.typography.smallSubtitle, color = ExtendedTheme.colors.textTertiary, ) } if (modelSelectorDropdownState.showProBadge) { Text( modifier = Modifier .background( color = ExtendedTheme.colors.backgroundPrimary, shape = RoundedCornerShape(14.dp), ) .padding(horizontal = 6.dp, vertical = 2.dp), text = "Pro", style = ExtendedTheme.typography.smallSubtitle, color = ExtendedTheme.colors.textPrimary, ) } } Text( text = modelSelectorDropdownState.description, style = ExtendedTheme.typography.smallSubtitle, color = ExtendedTheme.colors.textSecondary, ) } if (modelSelectorDropdownState.isSelected) { Icon( modifier = Modifier.size(16.dp), imageVector = ImageVector.vectorResource( id = com.suno.android.common_ui.R.drawable.check, ), contentDescription = null, tint = ExtendedTheme.colors.textPrimary, ) } } } @PreviewLightDark @Composable private fun ModelSelectorItem_Preview() { SunoTheme { ModelSelectorDropdownItem( modelSelectorDropdownState = ModelSelectorDropdownState( title = "v4.5", showBetaBadge = true, showProBadge = true, songsLeft = 20, description = "Smarter prompts, better genre mashups, faster generations, max 8 min", ), onClick = {}, ) } }