import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { Task } from '../types/task';

interface TaskCardProps {
  task: Task;
  onPress: (id: string) => void;
}

// 主页任务卡片不需要显示状态，因为都是未运行的任务模板

const TaskCard: React.FC<TaskCardProps> = ({ task, onPress }) => {
  return (
    <TouchableOpacity onPress={() => onPress(task.id)} style={styles.container}>
      <View style={styles.contentContainer}>
        <Text style={styles.title}>{task.label}</Text>
        <Text style={styles.description} numberOfLines={2}>
          {task.description || '暂无描述'}
        </Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#1a1a1a',
    paddingVertical: 16,
    paddingHorizontal: 16,
  },
  contentContainer: {
    flex: 1,
  },
  title: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  description: {
    color: '#999999',
    fontSize: 14,
    lineHeight: 20,
  },
});

export default TaskCard;
