import { Fragment } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { colors, fonts, radius, spacing } from '../theme/proulr-theme';

export function StatRow({ stats }: { stats: { value: string; label: string; highlight?: boolean }[] }) {
  return (
    <View style={styles.statRow}>
      {stats.map((s, i) => (
        <Fragment key={s.label}>
          {i > 0 ? <View style={styles.statDivider} /> : null}
          <View style={styles.statItem}>
            <Text style={[styles.statValue, s.highlight && { color: colors.accentText }]}>{s.value}</Text>
            <Text style={styles.statLabel}>{s.label}</Text>
          </View>
        </Fragment>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  statRow: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: colors.surface2,
    borderRadius: radius.lg,
    paddingVertical: spacing.sm,
  },
  statItem: { flex: 1, alignItems: 'center' },
  statDivider: { width: 1, height: 36, backgroundColor: colors.border },
  statValue: { color: colors.white, fontSize: 18, fontFamily: fonts.bold },
  statLabel: { color: colors.textSecondary, fontSize: 12, marginTop: 2, fontFamily: fonts.medium },
});