webapp/src/components/TaskCard.tsx

import React from 'react';
import { StyleSheet } from 'react-native';
import { Card, Text, Chip, useTheme } from 'react-native-paper';
import { Task, TaskStatus } from '../types/task';

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

const statusColors: Record<TaskStatus, string> = {
  IDLE: 'grey',
  RUNNING: 'blue',
  COMPLETED: 'green',
  ERROR: 'red',
};

const TaskCard: React.FC<TaskCardProps> = ({ task, onPress }) => {
  const theme = useTheme();

  return (
    <Card style={styles.card} onPress={() => onPress(task.id)}>
      <Card.Content>
        <Text variant="titleMedium" style={styles.title}>{task.name}</Text>
        <Chip 
          icon="information" 
          mode="outlined"
          selectedColor={statusColors[task.status]}
          style={[styles.chip, {backgroundColor: theme.colors.surface}]}
        >
          {task.status}
        </Chip>
      </Card.Content>
    </Card>
  );
};

const styles = StyleSheet.create({
  card: {
    margin: 8,
    width: '45%',
  },
  title: {
    marginBottom: 12,
    minHeight: 50, // Ensure cards have similar height
  },
  chip: {
    alignSelf: 'flex-start',
  }
});

export default TaskCard;