package com.suno.android.common_ui.components.indicators

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.LocalContentColor
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.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.suno.android.common_ui.theme.AukPink
import com.suno.android.common_ui.theme.ExtendedTheme
import com.suno.android.common_ui.theme.SunoTheme

@Composable
fun Pill(
    modifier: Modifier = Modifier,
    color: Color = ExtendedTheme.colors.backgroundTertiary,
    contentColor: Color = LocalContentColor.current,
    borderColor: Color? = null,
    onClick: (() -> Unit)? = {},
    text: String = "",
) {
    val shape = RoundedCornerShape(24.dp)
    Box(
        modifier = modifier
            .border(
                width = 1.dp,
                color = borderColor ?: color.copy(alpha = 0.3f),
                shape = shape,
            )
            .clip(shape)
            .background(
                color = color,
                shape = shape,
            )
            .padding(2.dp)
            .clickable(
                enabled = onClick != null,
                onClick = { onClick?.invoke() },
            ),
        contentAlignment = Alignment.Center,
    ) {
        Text(
            modifier = Modifier.padding(horizontal = 4.dp),
            text = text,
            color = contentColor,
            style = ExtendedTheme.typography.smallBody,
        )
    }
}

@Preview
@Composable
private fun VersionPill_Preview() {
    SunoTheme {
        Pill(
            color = AukPink,
            text = "v4",
        )
    }
}