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

function ColourChanges({ colourChange }) {
  return (
    <div
      className={`carCardInfo ${colourChange?.NumberOfPreviousColours ? "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">
          {colourChange?.NumberOfPreviousColours ? (
            <i>
              <Image src="../assets/closeIcon1.png" alt="closeIcon1" />
            </i>
          ) : (
            <i>
              <Image src="../assets/checkIcon1.png" alt="checkIcon1" />
            </i>
          )}
          Colour Changes
        </h4>
      </div>
      <div className="carCardInfoList">
        <ListGroup as="ul">
          <ListGroup.Item as="li">
            <span className="carCardInfoListTitle">Current Colour</span>
            {colourChange?.CurrentColour ?? "***"}
          </ListGroup.Item>
          <ListGroup.Item as="li">
            <span className="carCardInfoListTitle">
              Number Of Previous Colours
            </span>
            {colourChange?.NumberOfPreviousColours && colourChange?.NumberOfPreviousColours != 0 ? colourChange?.NumberOfPreviousColours : "***"}
          </ListGroup.Item>
          <ListGroup.Item as="li">
            <span className="carCardInfoListTitle">Last Colour</span>
            {colourChange?.LastColour ?? "***"}
          </ListGroup.Item>
          <ListGroup.Item as="li">
            <span className="carCardInfoListTitle">
              Date Of Last Colour Change
            </span>
            {formatDate(colourChange?.DateOfLastColourChange) ?? "***"}
          </ListGroup.Item>
          <ListGroup.Item as="li">
            <span className="carCardInfoListTitle">Original Colour</span>
            {colourChange?.OriginalColour ?? "***"}
          </ListGroup.Item>
        </ListGroup>
      </div>
    </div>
  );
}

export default ColourChanges;