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

interface ImportExportProps {
  importExport: {
    importNonEu: boolean;
    imported: boolean;
    exported: boolean;
    dateExported: string | null;
  };
}

function ImportExport({ importExport }: ImportExportProps) {
  return (
    <div
      className={`carCardInfo ${importExport?.imported || importExport?.exported ? "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">
          {importExport?.imported || importExport?.exported ? (
            <i>
              <Image src="../assets/closeIcon1.png" alt="closeIcon1" />
            </i>
          ) : (
            <i>
              <Image src="../assets/checkIcon1.png" alt="checkIcon1" />
            </i>
          )}
          Import/Export
        </h4>
      </div>
      <div className="carCardInfoList">
        <ListGroup as="ul">        

          <ListGroup.Item as="li">
            <span className="carCardInfoListTitle">Exported</span>
            {importExport?.exported ? "Yes" : "No"}
          </ListGroup.Item>
          <ListGroup.Item as="li">
            <span className="carCardInfoListTitle">Export Date</span>
            {importExport?.dateExported ? formatDate(importExport?.dateExported) : "***"}
          </ListGroup.Item>
          
         <ListGroup.Item as="li">
            <span className="carCardInfoListTitle">Imported</span>
            {importExport?.imported ? "Yes" : "No"}
          </ListGroup.Item>
          
          <ListGroup.Item as="li">
            <span className="carCardInfoListTitle"></span>
            {""}
          </ListGroup.Item>
        </ListGroup>

      </div>
    </div>
  );
}

export default ImportExport;