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

interface TeslaSuperchargingProps {
  electricVehicleData: ElectricVehicleDataType;
}

const TeslaSupercharging: React.FC<TeslaSuperchargingProps> = ({ electricVehicleData }) => {
  if (!electricVehicleData.TeslaSuperchargerCompatible || !electricVehicleData.TeslaSupercharging) {
    return null;
  }

  // Get compatible versions
  const compatibleVersions = Object.entries(electricVehicleData.TeslaSupercharging)
    .filter(([_, details]) => {
      console.log(_);
      return details.IsCompatible;
    });

  return (
    <>
      {compatibleVersions.map(([version, details], index) => (        
        <div key={version} className="cardBlock mb-4">
          <div className="carCardInfo">
            <div className="carCardInfoHead">
              <h4 className="text-center font-weight-800 title-color m-0">
                Tesla Supercharging - Version {index+1} 
              </h4>
            </div>
            <div className="carCardInfoList">
              <ListGroup as="ul">
                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Max Charge kW</span>
                  {details.MaxChargeKw || "***"}
                </ListGroup.Item>

                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Requires CCS Adapter</span>
                  {details.RequiresCcsAdaptor ? "Yes" : "No"}
                </ListGroup.Item>


                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Average Charge Time 10 to 80 percent (minutes)</span>
                  {details?.AverageChargeTime10To80Percent || "***"}
                </ListGroup.Item>

                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Is Compatible</span>
                  {details?.IsCompatible ? "Yes" : "No"}
                </ListGroup.Item>

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

export default TeslaSupercharging;