package com.aiosman.ravenow.ui.composables

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
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.unit.dp
import androidx.compose.ui.unit.sp
import com.aiosman.ravenow.LocalAppTheme
import com.aiosman.ravenow.ui.modifiers.noRippleClickable

/**
 * 可复用的标签页组件
 */
@Composable
fun TabItem(
    text: String,
    isSelected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    val AppColors = LocalAppTheme.current
    
    Column(
        modifier = modifier
            .noRippleClickable { onClick() },
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = text,
            fontSize = 15.sp,
            color = if (isSelected) AppColors.tabSelectedText else AppColors.tabUnselectedText,
            modifier = Modifier
                .clip(RoundedCornerShape(12.dp))
                .background(if (isSelected) AppColors.tabSelectedBackground else AppColors.tabUnselectedBackground)
                .padding(horizontal = 16.dp, vertical = 8.dp)
        )
    }
}

/**
 * 标签页之间的间隔组件
 */
@Composable
fun TabSpacer() {
    Spacer(modifier = Modifier.width(8.dp))
}
