"use client";
import React from 'react';
import { ListGroup } from 'react-bootstrap';
import { ElectricVehicleData as ElectricVehicleDataType } from '@/types/api';

interface RangeFiguresProps {
  electricVehicleData: ElectricVehicleDataType;
}

const RangeFigures: React.FC<RangeFiguresProps> = ({ electricVehicleData }) => {
  if (!electricVehicleData.RangeFigures?.RangeTestCycleDetailsList ||
    electricVehicleData.RangeFigures.RangeTestCycleDetailsList.length === 0) {
    return null;
  }

  return (
    <>
      {electricVehicleData.RangeFigures.RangeTestCycleDetailsList.map((range, index) => (
        <div key={index} className="cardBlock mb-4">
          <div className="carCardInfo">
            <div className="carCardInfoHead">
              <h4 className="text-center font-weight-800 title-color m-0">
                Range Test Cycle Details List
              </h4>
            </div>
            <div className="carCardInfoList">
              <ListGroup as="ul">

                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Combined Range Miles</span>
                  {range.CombinedRangeMiles || "***"}
                </ListGroup.Item>

                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">City Range Miles</span>
                  {range.CityRangeMiles || "***"}
                </ListGroup.Item>


                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Combined Range KM</span>
                  {range.CombinedRangeKm || "***"}
                </ListGroup.Item>

                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">City Range KM</span>
                  {range.CityRangeKm || "***"}
                </ListGroup.Item>

                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">EV Range Test Type</span>
                  {range.EvRangeTestType}
                </ListGroup.Item>   
               
              </ListGroup>
            </div>
          </div>
        </div>
      ))}
    </>
  );
};

export default RangeFigures;