import type { SightingType } from "../../types/types";
import NumberPlate from "../PlateStack/NumberPlate";
import ModalComponent from "../UI/ModalComponent";

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>
        <h2>Sighting Details</h2>
      </div>
      <button onClick={handleClose}>close</button>
      <div>
        <div>
          <NumberPlate vrm={sighting?.vrm} motion={motionAway} />
        </div>
        <div>
          <img
            src={sighting?.overviewUrl}
            alt="overview patch"
            className="h-[50%] w-[50%]"
          />
        </div>
        <div>
          <img src={sighting?.plateUrlColour} alt="plate patch" height={48} />
          <img
            src={sighting?.plateUrlInfrared}
            height={48}
            alt="infrared patch"
            className={"opacity-60"}
          />
        </div>
      </div>
    </ModalComponent>
  );
};

export default SightingModal;