import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

interface MoodCardCompactProps {
  onPress: () => void;
}

export function MoodCardCompact({ onPress }: MoodCardCompactProps) {
  return (
    <TouchableOpacity style={styles.container} onPress={onPress}>
      <View style={styles.header}>
        <Text style={styles.title}>心情</Text>
      </View>

      <View style={styles.content}>
        <View style={styles.moodIcon}>
          <Text style={styles.emoji}>😊</Text>
        </View>
        <Text style={styles.moodText}>记录今日心情</Text>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#E8F5E8',
    borderRadius: 16,
    padding: 16,
    minHeight: 100,
  },
  header: {
    marginBottom: 8,
  },
  title: {
    fontSize: 14,
    fontWeight: '800',
    color: '#192126',
  },
  content: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  moodIcon: {
    width: 32,
    height: 32,
    borderRadius: 16,
    backgroundColor: '#4CAF50',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 8,
  },
  emoji: {
    fontSize: 16,
  },
  moodText: {
    fontSize: 12,
    color: '#2E7D32',
    fontWeight: '600',
    flex: 1,
  },
});