Mav-Mobile-UI/src/components/SightingModal/SightingModal.tsx

import { faCheck, faX } from "@fortawesome/free-solid-svg-icons";
import type { SightingType } from "../../types/types";
import NumberPlate from "../PlateStack/NumberPlate";
import ModalComponent from "../UI/ModalComponent";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

type SightingModalProps = {
  isSightingModalOpen: boolean;
  handleClose: () => void;
  sighting: SightingType | null;
};

const SightingModal = ({
  isSightingModalOpen,
  handleClose,
  sighting,
}: SightingModalProps) => {
  const motionAway = (sighting?.motion ?? "").toUpperCase() === "AWAY";

  return (
    <ModalComponent isModalOpen={isSightingModalOpen} close={handleClose}>
      <div className="max-w-screen-lg mx-auto p-4">
        <div className="border-b border-gray-600 mb-4">
          <h2 className="text-lg md:text-xl font-semibold">Sighting Details</h2>
        </div>

        <div className="flex flex-col gap-6 md:flex-row">
          <div className="flex-1 flex flex-col gap-4">
            <div className="flex justify-start md:justify-start">
              <NumberPlate vrm={sighting?.vrm} motion={motionAway} />
            </div>

            <img
              src={sighting?.overviewUrl}
              alt="overview patch"
              className="w-full h-56 sm:h-72 md:h-96 rounded-lg object-cover border border-gray-700"
            />

            <div className="flex items-center gap-3">
              <img
                src={sighting?.plateUrlColour}
                alt="plate patch"
                className="h-16 w-auto object-contain rounded-md border border-gray-700"
              />
              <img
                src={sighting?.plateUrlInfrared}
                alt="infrared patch"
                className="h-16 w-auto object-contain rounded-md border border-gray-700 opacity-70"
              />
            </div>
          </div>

          <aside className="md:w-80 lg:w-96 bg-gray-800/70 text-white rounded-xl p-4 border border-gray-700">
            <h3 className="text-base md:text-lg font-semibold pb-2 border-b border-gray-700">
              Vehicle Info
            </h3>

            <dl className="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2 text-sm">
              <div>
                <dt className="text-gray-300">VRM</dt>
                <dd className="font-medium break-all">
                  {sighting?.vrm ?? "-"}
                </dd>
              </div>
              <div>
                <dt className="text-gray-300">Motion</dt>
                <dd className="font-medium">{sighting?.motion ?? "-"}</dd>
              </div>
              <div>
                <dt className="text-gray-300">Seen Count</dt>
                <dd className="font-medium">{sighting?.seenCount ?? "-"}</dd>
              </div>
              <div>
                <dt className="text-gray-300">Time</dt>
                <dd className="font-medium">{sighting?.timeStamp ?? "-"}</dd>
              </div>
              <div className="sm:col-span-2">
                <dt className="text-gray-300">Location</dt>
                <dd className="font-medium truncate">
                  {sighting?.locationName ?? "-"}
                </dd>
              </div>
              <div>
                <dt className="text-gray-300">Make</dt>
                <dd className="font-medium">{sighting?.make ?? "-"}</dd>
              </div>
              <div>
                <dt className="text-gray-300">Model</dt>
                <dd className="font-medium">{sighting?.model ?? "-"}</dd>
              </div>
              <div className="sm:col-span-2">
                <dt className="text-gray-300">Colour</dt>
                <dd className="font-medium">{sighting?.color ?? "-"}</dd>
              </div>
            </dl>
          </aside>
        </div>

        <div className="mt-6 flex flex-col-reverse gap-3 md:flex-row md:justify-center">
          <button
            className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-2.5 bg-red-600 text-white hover:bg-red-700 w-full md:w-auto"
            onClick={handleClose}
          >
            <FontAwesomeIcon icon={faX} />
            Close
          </button>
          <button
            className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-2.5 bg-green-600 text-white hover:bg-green-700 w-full md:w-auto"
            onClick={handleClose}
          >
            <FontAwesomeIcon icon={faCheck} />
            Acknowledge
          </button>
        </div>
      </div>
    </ModalComponent>
  );
};

export default SightingModal;