managarten/memoro/apps/mobile/components/statistics/StatRow.tsx

import React from 'react';
import { View, Text } from 'react-native';
import { useTheme } from '~/features/theme/ThemeProvider';
import Icon from '~/components/atoms/Icon';
import colors from '~/tailwind.config.js';

interface StatRowProps {
  title: string;
  value: string;
  icon: string;
  subtitle?: string;
}

/**
 * Reusable row component for displaying a statistic with icon, title and value
 */
const StatRow: React.FC<StatRowProps> = ({ title, value, icon, subtitle }) => {
  const { isDark, themeVariant } = useTheme();

  const textColor = isDark ? '#FFFFFF' : '#000000';
  const textSecondaryColor = isDark ? '#CCCCCC' : '#666666';
  const primaryColor = isDark
    ? (colors as any).theme?.extend?.colors?.dark?.[themeVariant]?.primary
    : (colors as any).theme?.extend?.colors?.[themeVariant]?.primary;
  const borderColor = isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';

  return (
    <View
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: 10,
        paddingHorizontal: 12,
        backgroundColor: isDark ? 'rgba(255, 255, 255, 0.03)' : 'rgba(0, 0, 0, 0.02)',
        borderRadius: 12,
      }}>
      <Icon name={icon} size={22} color={primaryColor} />
      <View style={{ flex: 1, marginLeft: 14 }}>
        <Text
          style={{
            fontSize: 14,
            fontWeight: '500',
            color: textColor,
          }}>
          {title}
        </Text>
        {subtitle && (
          <Text
            style={{
              fontSize: 12,
              color: textSecondaryColor,
              marginTop: 2,
            }}>
            {subtitle}
          </Text>
        )}
      </View>
      <Text
        style={{
          fontSize: 17,
          fontWeight: '700',
          color: textColor,
          textAlign: 'right',
        }}>
        {value}
      </Text>
    </View>
  );
};

export default StatRow;