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

interface GeneralInfoProps {
  electricVehicleData: ElectricVehicleDataType;
}

const GeneralInfo: React.FC<GeneralInfoProps> = ({ electricVehicleData }) => {
  return (
    <div className="cardBlock mb-4">
      <div className="carCardInfo">
        <div className="carCardInfoHead">
          <h4 className="text-center font-weight-800 title-color m-0">
            Electrical Vehicle Data
          </h4>
        </div>
        <div className="carCardInfoList">
          <ListGroup as="ul">
            
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Watt-Hours / Mile</span>
              {electricVehicleData.WhMile || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">
                Max Miles per Charge Hour
              </span>
              {electricVehicleData.MaxMilesPerChargeHour || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Zero Emission Miles</span>
              {electricVehicleData.ZeroEmissionMiles || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">
                Max Miles per Charge Minute
              </span>
              {electricVehicleData.MaxMilesPerChargeMinute || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">
                Manufacturer Warranty Miles
              </span>
              {electricVehicleData.ManufacturerWarrantyMiles || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Vehicle Type</span>
              {electricVehicleData.VehicleType || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">
                Manufacturer Warranty Months
              </span>
              {electricVehicleData.ManufacturerWarrantyMonths || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">
                Tesla Supercharger Compatible
              </span>
              {electricVehicleData.TeslaSuperchargerCompatible ? "Yes" : "No"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Max Range Miles</span>
              {electricVehicleData.MaxRangeMiles || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Max KW Charge Input</span>
              {electricVehicleData.MaxKwChargeInput || "***"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Max Range Km</span>
              {electricVehicleData.MaxRangeKm || 0}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">OTA Upgradable</span>
              {electricVehicleData.OtaUpgradable ? "TRUE" : "FALSE"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">CO2</span>
              {electricVehicleData.Co2 || 0} g/km
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Latest OTA Version</span>
              {electricVehicleData.LatestOtaVersion || "***"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Drag Coefficient</span>
              {electricVehicleData.DragCoefficient || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Hardware Version</span>
              {electricVehicleData.HwVersion || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">
                Drivetrain Version Description
              </span>
              {electricVehicleData.DrivetrainVersionDescription || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">
                Is Electric Vehicle
              </span>
              {electricVehicleData.Identification?.IsElectricVehicle ? 'YES' : 'NO' }
            </ListGroup.Item>
            
          </ListGroup>
        </div>
      </div>
    </div>
  );
};

export default GeneralInfo;