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

interface TransmissionDetailsProps {
    electricVehicleData: ElectricVehicleDataType;
}

const TransmissionDetails: React.FC<TransmissionDetailsProps> = ({ electricVehicleData }) => {
    if (!electricVehicleData.TransmissionDetailsList) {
        return null;
    }

    return (
        <>
            {electricVehicleData.TransmissionDetailsList.map((item, 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">
                                Transmission Details - {index + 1}
                            </h4>
                        </div>
                        <div className="carCardInfoList">
                            <ListGroup as="ul">
                                <ListGroup.Item as="li">
                                    <span className="carCardInfoListTitle">Transmission Type</span>
                                    {item.TransmissionType}
                                </ListGroup.Item>
                                <ListGroup.Item as="li">
                                    <span className="carCardInfoListTitle">Number of Gears</span>
                                    {item.NumberOfGears}
                                </ListGroup.Item>
                                
                                <ListGroup.Item as="li">
                                    <span className="carCardInfoListTitle">Transmission Location</span>
                                    {item.TransmissionLocation}
                                </ListGroup.Item>

                                <ListGroup.Item as="li">
                                    <span className="carCardInfoListTitle">Transmission Details Count</span>
                                    {electricVehicleData.TransmissionDetailsCount}
                                </ListGroup.Item>
                            </ListGroup>
                        </div>
                    </div>
                </div>
            ))}
        </>
    );
};

export default TransmissionDetails;