package com.suno.android.common_ui.components.buttons

import androidx.compose.animation.animateColorAsState
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.suno.android.common_ui.theme.ExtendedTheme
import com.suno.android.common_ui.theme.SunoTheme

@Composable
fun SearchTabButton(
    text: String,
    modifier: Modifier = Modifier,
    selected: Boolean = false,
    onClick: () -> Unit = {},
) {
    Surface(
        shape = MaterialTheme.shapes.small,
        color = animateColorAsState(
            targetValue = if (selected) {
                ExtendedTheme.colors.backgroundInvert
            } else {
                ExtendedTheme.colors.backgroundSecondary
            },
        ).value,
        contentColor = animateColorAsState(
            targetValue = if (selected) {
                ExtendedTheme.colors.backgroundSecondary
            } else {
                ExtendedTheme.colors.textPrimary
            },
        ).value,
        onClick = onClick,
        modifier = modifier,
    ) {
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 24.dp, vertical = 8.dp),
        ) {
            Text(
                text = text,
                style = ExtendedTheme.typography.body,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
            )
        }
    }
}

@Preview
@Composable
private fun SearchTabButton_Preview() {
    SunoTheme {
        Column {
            SearchTabButton(text = "Hello world")
        }
    }
}

@Preview
@Composable
private fun SearchTabButton_Selected_Preview() {
    SunoTheme {
        Column {
            SearchTabButton(text = "Hello world", selected = true)
        }
    }
}