// components/TaskTroveSection.js

import React from 'react';
import { Box, Text } from 'ink';

function renderTaskTroveList(tasks) {
  if (!tasks) {
    return <Text>Chargement des tâches...</Text>;
  }

  if (tasks.length === 0) {
    return <Text>Aucune tâche à afficher.</Text>;
  }

  return (
    <Box flexDirection="column">
      {tasks.map((task, index) => {
        const color = task.priority === 1 ? 'red' : task.priority === 2 ? 'yellow' : 'white';
        return (
          <Text key={index} color={color}>
            - {task.title}
          </Text>
        );
      })}
    </Box>
  );
}

export function TaskTroveSection({ tasks, width }) {
  return (
    <Box flexDirection="column" marginTop={1} width={width}>
      <Text color="cyan">To-Do List</Text>
      {renderTaskTroveList(tasks)}
    </Box>
  );
}