Chronosight/composeApp/src/commonMain/kotlin/com/grtsinry43/chronosight/components/MetricCardC.kt

package com.grtsinry43.chronosight.components

import androidx.compose.foundation.layout.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Star
import androidx.compose.material3.Icon
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.graphics.vector.ImageVector
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.grtsinry43.chronosight.theme.AppThemes
import org.jetbrains.compose.ui.tooling.preview.Preview

@Composable
fun MetricCard(
    title: String,
    value: String,
    icon: ImageVector,
    colors: AppThemes.Colors,
    modifier: Modifier = Modifier
) {
    StyledCard(colors = colors, modifier = modifier) {
        Column(
            modifier = Modifier.padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(6.dp) // Tighter spacing for mobile
        ) {
            Icon(
                imageVector = icon,
                contentDescription = title,
                tint = colors.accent,
                modifier = Modifier.size(28.dp)
            )
            Text(
                text = title,
                style = MaterialTheme.typography.labelMedium.copy(color = colors.secondaryText),
                textAlign = TextAlign.Center
            )
            Text(
                text = value,
                style = MaterialTheme.typography.titleMedium.copy(
                    color = colors.onSurface,
                    fontWeight = FontWeight.Bold
                ),
                textAlign = TextAlign.Center
            )
        }
    }
}

@Preview
@Composable
fun MetricCardPreview() {
    MaterialTheme {
        MetricCard(
            title = "Total Users",
            value = "1,234",
            icon = Icons.Default.Star,
            colors = AppThemes.LightThemeColors
        )
    }
}

@Preview
@Composable
fun MetricCardDarkPreview() {
    MaterialTheme {
        MetricCard(
            title = "Active Sessions (Dark)",
            value = "56",
            icon = Icons.Default.Star, // Placeholder
            colors = AppThemes.DarkThemeColors
        )
    }
}