package stories.presentation.components

import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
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.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import core.presentation.components.AppAvatar
import core.presentation.theme.SoftSquareShape

@Composable
fun StoryThumbnail(
    username: String?,
    avatarUrl: String?,
    hasUnseen: Boolean,
    onClick: () -> Unit
) {
    val displayUsername = username ?: "User"
    val gradientBrush = Brush.sweepGradient(
        colors = listOf(Color.Cyan, Color.Magenta, Color.Yellow, Color.Cyan)
    )

    Column(
        modifier = Modifier
            .padding(8.dp)
            .clickable(onClick = onClick),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Box(
            modifier = Modifier
                .size(72.dp)
                .padding(4.dp)
                .then(
                    if (hasUnseen) Modifier.border(3.dp, gradientBrush, SoftSquareShape)
                    else Modifier.border(1.dp, Color.Gray, SoftSquareShape)
                ),
            contentAlignment = Alignment.Center
        ) {
            AppAvatar(
                url = avatarUrl,
                name = displayUsername,
                size = 60.dp,
                modifier = Modifier.padding(2.dp)
            )
        }
        
        Spacer(modifier = Modifier.height(4.dp))
        
        Text(
            text = displayUsername,
            fontSize = 11.sp,
            maxLines = 1,
            color = MaterialTheme.colorScheme.onSurface
        )
    }
}