digital-pilates/components/statistic/HealthDataCard.tsx

import { Image } from 'expo-image';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';

interface HealthDataCardProps {
  title: string;
  value: string;
  unit: string;
  style?: object;
}

const HealthDataCard: React.FC<HealthDataCardProps> = ({
  title,
  value,
  unit,
  style
}) => {
  return (
    <Animated.View
      entering={FadeIn.duration(300)}
      exiting={FadeOut.duration(300)}
      style={[styles.card, style]}
    >
      <View style={styles.content}>
        <View style={{
          flexDirection: 'row',
          alignItems: 'center',
          marginBottom: 14,
        }}>
          <Image
            source={require('@/assets/images/icons/icon-blood-oxygen.png')}
            style={styles.titleIcon}
          />
          <Text style={styles.title}>{title}</Text>
        </View>
        <View style={styles.valueContainer}>
          <Text style={styles.value}>{value}</Text>
          <Text style={styles.unit}>{unit}</Text>
        </View>
      </View>
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  card: {
    shadowColor: '#000',
    paddingHorizontal: 16,
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.1,
    shadowRadius: 3.84,
    elevation: 5,
    marginVertical: 8,
    flexDirection: 'row',
    alignItems: 'center',
  },
  content: {
    flex: 1,
    justifyContent: 'center',
  },
  titleIcon: {
    width: 16,
    height: 16,
    marginRight: 6,
    resizeMode: 'contain',
  },
  title: {
    fontSize: 14,
    color: '#192126',
    fontWeight: '600',
  },
  valueContainer: {
    flexDirection: 'row',
    alignItems: 'flex-end',
  },
  value: {
    fontSize: 16,
    fontWeight: '600',
    color: '#192126',
  },
  unit: {
    fontSize: 12,
    color: '#666',
    marginLeft: 4,
    marginBottom: 2,
    fontWeight: '500',
  },
});

export default HealthDataCard;