"use client";
import { formatDate } from "@/utils/helpers";
import { ListGroup } from "react-bootstrap";

function PerformanceInformation({ performanceInformation }) {
  return (
      <div className="carCardInfo mb-5">
        <div className="carCardInfoHead">
          <h4 className="text-center font-weight-800 title-color m-0">
            Performance Information
          </h4>
        </div>
        <div className="carCardInfoList">
          <ListGroup as="ul">
            {/* Torque FtLb */}
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Torque FtLb</span>
              {performanceInformation?.Torque?.FtLb || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Power Rpm</span>
              {performanceInformation?.Power?.Rpm}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Torque Rpm</span>
              {performanceInformation?.Torque?.Rpm || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Power Bhp</span>
              {performanceInformation?.Power?.Bhp || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Torque Nm</span>
              {performanceInformation?.Torque?.Nm || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Power Kw</span>
              {performanceInformation?.Power?.Kw}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Co2</span>
              {performanceInformation?.Co2 || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">NoiseLevel</span>
              {performanceInformation?.NoiseLevel || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Max Speed Mph</span>
              {performanceInformation?.MaxSpeed?.Kph || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Particles</span>
              {performanceInformation?.Particles || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Max Speed Kph</span>
              {performanceInformation?.MaxSpeed?.Mph || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Data Version Number</span>
              {formatDate(performanceInformation?.DataVersionNumber) || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">
                Acceleration ZeroTo 60Mph
              </span>
              {performanceInformation?.Acceleration?.ZeroTo60Mph || "***"}
            </ListGroup.Item>
            
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Acceleration Mph</span>
              {performanceInformation?.Acceleration?.Mph || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">
                Acceleration Zero To 100Kph
              </span>
              {performanceInformation?.Acceleration?.ZeroTo100Kph || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Acceleration Kph</span>
              {performanceInformation?.Acceleration?.Kph || "***"}
            </ListGroup.Item>
          </ListGroup>
        </div>
      </div>
  );
}

export default PerformanceInformation;