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

function VehicleInformation({ vehicleInformation }) {
  // Function to format dates properly
  // const formatDate = (dateString: string | null) => {
  //   if (!dateString) return "***";
  //   return new Date(dateString).toLocaleDateString("en-GB", {
  //     day: "2-digit",
  //     month: "short",
  //     year: "numeric"
  //   });
  // };

  return (
    <div className="cardBlock">
      <div className="carCardInfo">
        <div className="carCardInfoHead">
          <h4 className="text-center font-weight-800 title-color m-0">
            Vehicle Information
          </h4>
        </div>
        <div className="carCardInfoList">
          <ListGroup as="ul">
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">
                Vehicle Registration Mark
              </span>
              {vehicleInformation?.Vrm || "***"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Make & Model</span>
              {vehicleInformation?.MakeModel || "***"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Make</span>
              {vehicleInformation?.Make || "***"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Model</span>
              {vehicleInformation?.Model || "***"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Engine Capacity</span>
              {vehicleInformation?.EngineCapacity
                ? `${vehicleInformation?.EngineCapacity}cc`
                : "***"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Year of Manufacture</span>
              {vehicleInformation?.YearOfManufacture || "***"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Fuel</span>
              {vehicleInformation?.FuelType || "***"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">
                Date First Registered
              </span>
              {formatDate(vehicleInformation?.DateFirstRegistered)}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Door Plan</span>
              {vehicleInformation?.DoorPlanLiteral || "***"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">
                Date of 1st Registration in UK
              </span>
              {formatDate(vehicleInformation?.DateFirstRegisteredUk)}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Colour</span>
              {vehicleInformation?.Colour || "***"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">
                Year-Month 1st Registered
              </span>
              {formatDateYear(vehicleInformation?.YearMonthFirstRegistered) ||
                "***"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">CO2 Emissions</span>
              {vehicleInformation?.Co2Emissions
                ? `${vehicleInformation?.Co2Emissions} g/km`
                : "***"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Transmission</span>
              {vehicleInformation?.Transmission || "***"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Gear Count</span>
              {vehicleInformation?.GearCount || "***"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Transmission Type</span>
              {vehicleInformation?.TransmissionType || "***"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Engine Number</span>
              {vehicleInformation?.EngineNumber || "***"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Transmission Code</span>
              {vehicleInformation?.TransmissionCode || "***"}
            </ListGroup.Item>
            {/* -------------------------------- */}
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Gross Weight</span>
              {vehicleInformation?.GrossWeight || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Door Plan Code</span>
              {vehicleInformation?.DoorPlan || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">
                Maximum Permissable Mass
              </span>
              {vehicleInformation?.MaxPermissibleMass || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">MVRIS Model Code</span>
              {vehicleInformation?.MvrisModelCode || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Seating Capacity</span>
              {vehicleInformation?.SeatingCapacity || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">MVRIS Make Code</span>
              {vehicleInformation?.MvrisMakeCode || "***"}
            </ListGroup.Item>

            {/* -------------------------------- */}

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Wheel Plan</span>
              {vehicleInformation?.WheelPlan || "***"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">
                Used Before First Registration
              </span>
              {vehicleInformation?.VehicleUsedBeforeFirstRegistration
                ? "Yes"
                : "No"}
            </ListGroup.Item>
            {/* <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">VIN Serial Number</span>
              {vehicleInformation?.Vin || "***"}
            </ListGroup.Item> */}
            {/* <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">VIN Last 5</span>
              {vehicleInformation?.VinLast5 || "***"}
            </ListGroup.Item> */}

            {/* -------------------------------- */}
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Vehicle Class</span>
              {vehicleInformation?.VehicleClass || "***"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">
                Vin Confirmation Flag
              </span>
              {vehicleInformation?.VinConfirmationFlag || "***"}
            </ListGroup.Item>

            {/* <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">IP Address</span>
              {vehicleInformation?.TransmissionCode || "***"}
            </ListGroup.Item> */}

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Date Of Last Update</span>
              {formatDate(vehicleInformation?.DateOfLastUpdate, false, true) ||
                "***"}
            </ListGroup.Item>

            {/* <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Country</span>
              {vehicleInformation?.CountryOfOrigin || "***"}
            </ListGroup.Item> */}

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

            {/* -------------------------------- */}

            {/* <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Vehicle Class</span>
              {vehicleInformation?.VehicleClass || "***"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Exported</span>
              {vehicleInformation?.Exported ? "Yes" : "No"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Scrapped</span>
              {vehicleInformation?.Scrapped ? "Yes" : "No"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">
                Certificate of Destruction Issued
              </span>
              {vehicleInformation?.CertificateOfDestructionIssued
                ? "Yes"
                : "No"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Date Of Last Update</span>
              {formatDate(vehicleInformation?.DateOfLastUpdate)}
            </ListGroup.Item> */}
          </ListGroup>
        </div>
      </div>
    </div>
  );
}

export default VehicleInformation;