import React from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';
import { Card, Text, Chip, useTheme } from '@rneui/themed';
import { Task, TaskStatus } from '../types/task';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

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 (
    <TouchableOpacity onPress={() => onPress(task.id)} style={{ flex: 1, width: '50%' }}>
      <Card containerStyle={styles.card}>
        <Card.Title style={styles.title}>{task.name}</Card.Title>
        <Card.Divider />
        <Chip
          title={task.status}
          icon={{
            name: 'information',
            type: 'material-community',
            size: 20,
            color: statusColors[task.status],
          }}
          type="outline"
          containerStyle={styles.chip}
          titleStyle={{ color: statusColors[task.status], fontSize: 12 }}
          buttonStyle={{ borderColor: statusColors[task.status] }}
        />
      </Card>
    </TouchableOpacity>
  );
};

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

export default TaskCard;