package com.suno.android.common_ui.components

import androidx.annotation.DrawableRes
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
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.Preview
import androidx.compose.ui.unit.dp
import com.suno.android.common_ui.R
import com.suno.android.common_ui.extensions.xAsFormattedCount
import com.suno.android.common_ui.theme.ExtendedTheme
import com.suno.android.common_ui.theme.TransparentCounterBackground

@Composable
fun IconCounter(
    modifier: Modifier = Modifier,
    @DrawableRes iconRes: Int,
    count: Int,
) {
    Row(
        modifier = modifier
            .wrapContentWidth()
            .background(
                color = TransparentCounterBackground,
                shape = RoundedCornerShape(4.dp),
            )
            .padding(horizontal = 2.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceAround,
    ) {
        Icon(
            modifier = Modifier.size(20.dp),
            imageVector = ImageVector.vectorResource(id = iconRes),
            tint = Color.White,
            contentDescription = null,
        )

        Text(
            text = count.xAsFormattedCount(),
            style = ExtendedTheme.typography.cardMeta,
            color = Color.White,
        )
    }
}

@Composable
@Preview(showBackground = true)
private fun IconCounter_Preview_100() {
    IconCounter(
        iconRes = R.drawable.thumbs,
        count = 100,
    )
}

@Composable
@Preview(showBackground = true)
private fun IconCounter_Preview_1_000() {
    IconCounter(
        iconRes = R.drawable.thumbs,
        count = 1000,
    )
}

@Composable
@Preview(showBackground = true)
private fun IconCounter_Preview_10_000() {
    IconCounter(
        iconRes = R.drawable.thumbs,
        count = 10200,
    )
}

@Composable
@Preview(showBackground = true)
private fun IconCounter_Preview_1_000_000() {
    IconCounter(
        iconRes = R.drawable.comments,
        count = 1_000_000,
    )
}