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

interface MotorDetailsProps {
  electricVehicleData: ElectricVehicleDataType;
}

const MotorDetails: React.FC<MotorDetailsProps> = ({ electricVehicleData }) => {
  if (!electricVehicleData.MotorDetailsList || electricVehicleData.MotorDetailsList.length === 0) {
    return null;
  }

  return (
    <>
      {electricVehicleData.MotorDetailsList.map((motor, 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">
                Motor Details List - {index + 1}
              </h4>
            </div>
            <div className="carCardInfoList">
              <ListGroup as="ul">
                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Manufacturer</span>
                  {`${motor.Manufacturer}` || "***"}
                </ListGroup.Item>

                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Motor Type</span>
                  {motor.MotorType}
                </ListGroup.Item>


                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Model</span>
                  {motor.Model || "***"}
                </ListGroup.Item>

                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Power Kw</span>
                  {motor.PowerKw || "***"}
                </ListGroup.Item>

                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Max Torque Nm</span>
                  {motor.MaxTorqueNm || "***"}
                </ListGroup.Item>

                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Regenerative Braking</span>
                  {motor.RegenBraking ? "Yes" : "No"}
                </ListGroup.Item>

                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Motor Location</span>
                  {motor.MotorLocation || "***"}
                </ListGroup.Item>
             
                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Max Power RPM</span>
                  {motor.MaxPowerRpm || "***"}
                </ListGroup.Item>
          
                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Additional Info</span>
                  {motor.AdditionalInformation || "***"}
                </ListGroup.Item>

                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Motor Details Count</span>
                  {electricVehicleData.MotorDetailsCount || "***"}
                </ListGroup.Item>

              </ListGroup>
            </div>
          </div>
        </div>
      ))}
    </>
  );
};

export default MotorDetails;