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

interface ScrapDestruction {
  scrapped: string;
  dateofScapped?: string;
  certificateofDestructionIssued: string;
  vehicleIdCheckCount: string;
}

function ScrapedDestruction({
  scrapDestruction
}: {
  scrapDestruction: ScrapDestruction;
}) {
  
  return (
    <div
      className={`carCardInfo ${scrapDestruction?.scrapped ? "redBorder" : "greenBorder"} mb-5`}
    >
      <div className="carCardInfoHead">
        <h4 className="d-flex align-items-center justify-content-center text-center font-weight-800 title-color  m-0">
          {scrapDestruction?.scrapped ? (
            <i>
              <Image src="../assets/closeIcon1.png" alt="closeIcon1" />
            </i>
          ) : (
            <i>
              <Image src="../assets/checkIcon1.png" alt="checkIcon1" />
            </i>
          )}
          Scrap Destructions
        </h4>
      </div>
      <div className="carCardInfoList">
        <ListGroup as="ul">
          <ListGroup.Item as="li">
            <span className="carCardInfoListTitle">Scrapped</span>
            {scrapDestruction?.scrapped ? "Yes" : "No"}
          </ListGroup.Item>
          <ListGroup.Item as="li">
            <span className="carCardInfoListTitle">Date of Scapped</span>
            {scrapDestruction?.dateofScapped != null ? formatDate(scrapDestruction?.dateofScapped)  :  "***"}
          </ListGroup.Item>
          <ListGroup.Item as="li">
            <span className="carCardInfoListTitle">
              Certificate of Destruction Issued
            </span>
            {scrapDestruction?.certificateofDestructionIssued ? "Yes" : "No"}
          </ListGroup.Item>
          <ListGroup.Item as="li">
            <span className="carCardInfoListTitle">Vehicle ID Check Count</span>

            {scrapDestruction?.vehicleIdCheckCount}
          </ListGroup.Item>
        </ListGroup>
      </div>
    </div>
  );
}

export default ScrapedDestruction;