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

interface BatteryDetailsProps {
  electricVehicleData: ElectricVehicleDataType;
}

const BatteryDetails: React.FC<BatteryDetailsProps> = ({ electricVehicleData }) => {
  if (!electricVehicleData.BatteryDetailsList || electricVehicleData.BatteryDetailsList.length === 0) {
    return null;
  }

  return (
    <>
      {electricVehicleData.BatteryDetailsList.map((battery, 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">
                Battery Details - {index + 1}
              </h4>
            </div>
            <div className="carCardInfoList">
              <ListGroup as="ul">
                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Capacity KWH</span>
                  {battery.CapacityKwh}
                </ListGroup.Item>

                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Chemistry</span>
                  {battery.Chemistry}
                </ListGroup.Item>

                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Battery Description</span>
                  {battery.BatteryDescription}
                </ListGroup.Item>


                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Battery Location</span>
                  {battery.BatteryLocation}
                </ListGroup.Item>


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


                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Battery Warranty Miles</span>
                  {battery.BatteryWarrantyMonths} months / {battery.BatteryWarrantyMiles}
                </ListGroup.Item>

                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Battery Warranty Months</span>
                  {battery.BatteryWarrantyMonths}
                </ListGroup.Item>

                {index == 0 &&
                  <ListGroup.Item as="li">
                    <span className="carCardInfoListTitle">Battery Details Count</span>
                    {electricVehicleData.BatteryDetailsCount}
                  </ListGroup.Item>
                }
              </ListGroup>
            </div>
          </div>
        </div>
      ))}
    </>
  );
};

export default BatteryDetails;