// components/WeatherSection.js

import React from 'react';
import { Box, Text } from 'ink';
import { weatherCodeMap } from '../utils/weatherCodes.js';

function renderWeather(location, weather) {
  if (!weather) return <Text>{location}: Loading weather...</Text>;

  const weatherInfo = weatherCodeMap[weather.weathercode] || { desc: 'Unknown', color: 'white' };

  return (
    <Text>
      {location}: <Text color={weatherInfo.color}>{weatherInfo.desc}</Text>,{' '}
      <Text color="cyan">{weather.temperature}°C</Text> (Vent : {weather.windspeed} km/h)
    </Text>
  );
}

export function WeatherSection({ weatherNancy, weatherParis, width }) {
  const flexDirection = width >= 60 ? "row" : "column";
  return (
    <Box flexDirection={flexDirection} justifyContent="space-between" width={width}>
      {renderWeather('Nancy', weatherNancy)}
      {renderWeather('Paris', weatherParis)}
    </Box>
  );
}