package com.suno.android.common_ui.components.images import androidx.compose.foundation.Image import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.CircleShape import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableFloatStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.drawWithCache import androidx.compose.ui.graphics.Color import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.layout.onSizeChanged import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import coil3.compose.AsyncImage import com.suno.android.common_core_utils.model.Url import com.suno.android.common_ui.R import com.suno.android.common_ui.theme.ExtendedTheme import com.suno.android.common_ui.theme.SunoTheme @Composable fun ProfileAvatarImage( modifier: Modifier = Modifier, avatarUrl: Url? = null, displayName: String? = null, contentDescription: String? = null, ) { var containerSize by remember { mutableFloatStateOf(0f) } Box( modifier = modifier.onSizeChanged { containerSize = minOf(it.width, it.height).toFloat() }, ) { if (avatarUrl != null) { AsyncImage( modifier = Modifier .fillMaxSize() .clip(CircleShape), model = avatarUrl, fallback = painterResource(R.drawable.ic_launcher_background), contentDescription = contentDescription, contentScale = ContentScale.Crop, alignment = Alignment.Center, ) } else { Image( modifier = Modifier .fillMaxSize() .clip(CircleShape) .drawWithCache { onDrawWithContent { drawContent() drawRect(Color.Black.copy(alpha = 0.2f)) } }, painter = painterResource(R.drawable.ic_launcher_background), contentDescription = null, ) if (!displayName.isNullOrEmpty()) { Text( modifier = Modifier.align(Alignment.Center), text = displayName.first().uppercase(), color = Color.White, style = ExtendedTheme.typography.largeBody.copy( fontSize = with(LocalDensity.current) { (containerSize * 0.6f).toSp() }, ), ) } } } } @Preview @Composable private fun ProfileAvatarImage_Preview() { SunoTheme { ProfileAvatarImage( modifier = Modifier.size(30.dp), avatarUrl = null, displayName = "Keith", ) } }