digital-pilates/components/MoodCard.tsx

import { MoodCheckin, getMoodConfig } from '@/services/moodCheckins';
import dayjs from 'dayjs';
import LottieView from 'lottie-react-native';
import React, { useEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

interface MoodCardProps {
  moodCheckin: MoodCheckin | null;
  onPress: () => void;
  isLoading?: boolean;
}

export function MoodCard({ moodCheckin, onPress }: MoodCardProps) {
  const { t } = useTranslation();
  const moodConfig = moodCheckin ? getMoodConfig(moodCheckin.moodType) : null;
  const animationRef = useRef<LottieView>(null);

  useEffect(() => {
    if (animationRef.current) {
      animationRef.current.play();
    }
  }, []);

  return (
    <TouchableOpacity onPress={onPress} style={styles.moodCardContent} >
      <View style={styles.moodCardHeader}>
        <View style={styles.titleContainer}>
          <Image
            source={require('@/assets/images/icons/icon-mood.png')}
            style={styles.titleIcon}
          />
          <Text style={styles.cardTitle}>{t('statistics.components.mood.title')}</Text>
        </View>
        <LottieView
          ref={animationRef}
          source={require('@/assets/lottie/mood/mood_demo.json')}
          autoPlay
          loop
          style={styles.lottieAnimation}
        />
      </View>
      {moodCheckin ? (
        <View style={styles.moodPreview}>
          <Text style={styles.moodPreviewText}>
            {moodConfig?.label || moodCheckin.moodType}
          </Text>
          <Text style={styles.moodPreviewTime}>
            {dayjs(moodCheckin.createdAt).format('HH:mm')}
          </Text>
        </View>
      ) : (
        <Text style={styles.moodEmptyText}>{t('statistics.components.mood.empty')}</Text>
      )}
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  moodCardContent: {
    width: '100%',
  },

  moodCardHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },

  titleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },

  titleIcon: {
    width: 16,
    height: 16,
    marginRight: 6,
    resizeMode: 'contain',
  },

  cardTitle: {
    fontSize: 14,
    color: '#192126',
    fontWeight: '600'
  },

  lottieAnimation: {
    width: 30,
    height: 30,
  },

  moodPreview: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: 12,
  },
  moodPreviewText: {
    fontSize: 14,
    color: '#059669',
    fontWeight: '600',
  },
  moodPreviewTime: {
    fontSize: 12,
    color: '#6B7280',
  },
  moodEmptyText: {
    fontSize: 12,
    color: '#9CA3AF',
    fontStyle: 'italic',
    marginTop: 22,
  },
  moodLoadingText: {
    fontSize: 12,
    color: '#9CA3AF',
    fontStyle: 'italic',
    marginTop: 22,
  },
});