digital-pilates/components/MoodCard.tsx

import { MoodCheckin, getMoodConfig } from '@/services/moodCheckins';
import dayjs from 'dayjs';
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

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

export function MoodCard({ moodCheckin, onPress, isLoading = false }: MoodCardProps) {
  const moodConfig = moodCheckin ? getMoodConfig(moodCheckin.moodType) : null;

  return (
    <TouchableOpacity onPress={onPress} style={styles.moodCardContent} disabled={isLoading}>
      <View style={styles.cardHeaderRow}>
        <View style={styles.moodIconContainer}>
          {moodCheckin ? (
            <Text style={styles.moodIcon}>
              {moodConfig?.emoji || '😊'}
            </Text>
          ) : (
            <Text style={styles.moodIcon}>😊</Text>
          )}
        </View>
        <Text style={styles.cardTitle}>心情</Text>
      </View>

      <Text style={styles.moodSubtitle}>记录你的每日心情</Text>

      {isLoading ? (
        <View style={styles.moodPreview}>
          <Text style={styles.moodLoadingText}>加载中...</Text>
        </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}>点击记录心情</Text>
      )}
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  moodCardContent: {
    width: '100%',
  },
  cardHeaderRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  moodIconContainer: {
    width: 24,
    height: 24,
    borderRadius: 8,
    backgroundColor: '#DCFCE7',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 10,
  },
  moodIcon: {
    fontSize: 14,
  },
  cardTitle: {
    fontSize: 14,
    fontWeight: '800',
    color: '#192126',
  },
  moodSubtitle: {
    fontSize: 12,
    color: '#6B7280',
    marginTop: 4,
    marginBottom: 8,
  },
  moodPreview: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: 4,
  },
  moodPreviewText: {
    fontSize: 14,
    color: '#059669',
    fontWeight: '600',
  },
  moodPreviewTime: {
    fontSize: 12,
    color: '#6B7280',
  },
  moodEmptyText: {
    fontSize: 12,
    color: '#9CA3AF',
    fontStyle: 'italic',
    marginTop: 4,
  },
  moodLoadingText: {
    fontSize: 12,
    color: '#9CA3AF',
    fontStyle: 'italic',
    marginTop: 4,
  },
});