import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { useTheme } from '../../theme';

interface StatCardProps {
  label: string;
  value: string;
  caption?: string;
  /** 默认 fgPrimary；收支场景传 financial.income/expense。 */
  valueColor?: string;
}

/** 统计数字卡：标题 + 大数字（等宽）+ 说明（首页/报表/年报共用）。 */
export function StatCard({ label, value, caption, valueColor }: StatCardProps) {
  const { theme } = useTheme();
  return (
    <View
      style={[styles.card, {
        backgroundColor: theme.colors.bgSecondary,
        borderRadius: theme.radii.xl,
        borderColor: theme.colors.border,
        padding: theme.spacing.md,
      }, theme.shadows.sm]}
    >
      <Text style={[theme.typography.caption, { color: theme.colors.fgSecondary }]}>{label}</Text>
      <Text
        style={[theme.typography.h2, styles.value, { color: valueColor ?? theme.colors.fgPrimary }]}
        numberOfLines={1}
      >
        {value}
      </Text>
      {caption ? (
        <Text style={[theme.typography.caption, { color: theme.colors.fgSecondary }]}>{caption}</Text>
      ) : null}
    </View>
  );
}

const styles = StyleSheet.create({
  card: { gap: 4, borderWidth: StyleSheet.hairlineWidth },
  value: { fontWeight: '800', fontVariant: ['tabular-nums'] },
});
