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

interface V5CCertificatesDetailsProps {
  V5CCertificates: { [key: string]: string };
}

function V5CCertificatesDetails({
  V5CCertificates
}: V5CCertificatesDetailsProps) {
  return (
    <>
      <div className="carCardInfo mb-5">
        <div className="carCardInfoHead">
          <h4 className="text-center font-weight-800 title-color  m-0">
            V5C Certificate issue details
          </h4>
        </div>
        <div className="carCardInfoList">
          <ListGroup as="ul">
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">
                V5C Certificate Count
              </span>
              {Object.keys(V5CCertificates).length}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Certificate Dates:</span>
              <div>
                {/* <div className="mb-2">06-01-2023</div>
                <div className="mb-2">14-11-2022</div>
                <div className="mb-2">24-09-2021</div>
                <div>11-12-2019</div> */}
                {Object.keys(V5CCertificates).map(key => {
                  return (
                    <div key={key} className="mb-2">
                      {formatDate(V5CCertificates[key])}
                    </div>
                  );
                })}
              </div>
            </ListGroup.Item>
          </ListGroup>
        </div>
      </div>
    </>
  );
}

export default V5CCertificatesDetails;