// components/DeviceSection.js

import React from 'react';
import { Box, Text } from 'ink';
import { LoadingBar } from './LoadingBar.js';

function renderDeviceInfo(deviceInfo, deviceError) {
  if (deviceError) {
    return <Text color="red">{deviceError}</Text>;
  }
  if (!deviceInfo) {
    return <Text>Chargement des informations...</Text>;
  }

  const percentage = deviceInfo.percentage;
  if (percentage == null) {
    return <Text>Status : {deviceInfo.status || 'N/A'}</Text>;
  } else {
    return (
      <Box flexDirection="column" marginTop={1}>
        <LoadingBar percentage={percentage} />
        <Text>Temps restant : {deviceInfo.remainingTime || 'N/A'}</Text>
        <Text>Status : {deviceInfo.status || 'N/A'}</Text>
      </Box>
    );
  }
}

export function DeviceSection({ deviceInfo, deviceError, width }) {
  return (
    <Box flexDirection="column" marginTop={1} width={width}>
      <Text color="green">Informations du device :</Text>
      {renderDeviceInfo(deviceInfo, deviceError)}
    </Box>
  );
}