digital-pilates/components/statistic/HealthDataCard.tsx

import { Image } from '@/components/ui/Image';
import React from 'react';
import { ImageSourcePropType, Pressable, StyleSheet, Text, View } from 'react-native';
import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';

interface HealthDataCardProps {
  title: string;
  value: string;
  unit: string;
  style?: object;
  onPress?: () => void;
  icon?: React.ReactNode;
  iconSource?: ImageSourcePropType;
  subtitle?: string;
}

const defaultIconSource = require('@/assets/images/icons/icon-blood-oxygen.png');

const HealthDataCard: React.FC<HealthDataCardProps> = ({
  title,
  value,
  unit,
  style,
  onPress,
  icon,
  iconSource,
  subtitle
}) => {
  const Container = onPress ? Pressable : View;

  return (
    <Animated.View entering={FadeIn.duration(300)} exiting={FadeOut.duration(300)} style={[styles.card, style]}>
      <Container
        style={styles.content}
        onPress={onPress}
        accessibilityRole={onPress ? 'button' : undefined}
        accessibilityLabel={title}
        accessibilityHint={onPress ? `${title} details` : undefined}
      >
        <View style={styles.headerRow}>
          {icon ? (
            <View style={styles.iconWrapper}>{icon}</View>
          ) : (
            <Image source={iconSource ?? defaultIconSource} 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>
        {subtitle ? (
          <Text style={styles.subtitle} numberOfLines={1}>
            {subtitle}
          </Text>
        ) : null}
      </Container>
    </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',
  },
  headerRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 14,
  },
  iconWrapper: {
    width: 16,
    height: 16,
    marginRight: 6,
    alignItems: 'center',
    justifyContent: 'center',
  },
  titleIcon: {
    width: 16,
    height: 16,
    marginRight: 6,
    resizeMode: 'contain',
  },
  title: {
    fontSize: 14,
    color: '#192126',
    fontWeight: '600',
    fontFamily: 'AliBold',
  },
  valueContainer: {
    flexDirection: 'row',
    alignItems: 'flex-end',
  },
  value: {
    fontSize: 16,
    fontWeight: '600',
    color: '#192126',
    fontFamily: 'AliBold',
  },
  unit: {
    fontSize: 12,
    color: '#666',
    marginLeft: 4,
    marginBottom: 2,
    fontWeight: '500',
    fontFamily: 'AliRegular',
  },
  subtitle: {
    marginTop: 6,
    fontSize: 12,
    color: '#8A8A8A',
    fontFamily: 'AliRegular',
  },
});

export default HealthDataCard;