// components/MatchesSection.js

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

function translateHomeAway(homeAway) {
  if (homeAway === 'Home') return 'domicile';
  if (homeAway === 'Away') return 'extérieur';
  return homeAway;
}

export function MatchesSection({ matches, teamColor, teamName, width }) {
  return (
    <Box flexDirection="column" marginTop={1} width={width}>
      <Text color={teamColor}>Matches à venir de <Text color={teamColor}>{teamName}</Text> :</Text>
      {!matches && <Text>Chargement des matchs...</Text>}
      {matches && matches.length === 0 && <Text>Aucun match trouvé.</Text>}
      {matches && matches.slice(0, 2).map((m, i) => (
        <Text key={i} wrap="truncate-end">
          {m.date} {m.time} - <Text color={teamColor}>{teamName}</Text> vs {m.opponent} ({translateHomeAway(m.homeAway)})
        </Text>
      ))}
    </Box>
  );
}