import NumberPlate from "../PlateStack/NumberPlate";
import ModalComponent from "../UI/ModalComponent";

type SightingModalProps = {
  isSightingModalOpen: boolean;
  handleClose: () => void;
};

const SightingModal = ({
  isSightingModalOpen,
  handleClose,
  sighting,
}: SightingModalProps) => {
  const motionAway = (sighting?.motion ?? "").toUpperCase() === "AWAY";
  return (
    <ModalComponent isModalOpen={isSightingModalOpen} close={handleClose}>
      <button onClick={handleClose}>close</button>
      <div>
        <h2>{sighting?.vrm}</h2>
        <NumberPlate vrm={sighting?.vrm} motion={motionAway} />
        <img
          src={sighting?.plateUrlInfrared}
          height={48}
          alt="infrared patch"
          className={"opacity-60"}
        />
      </div>
    </ModalComponent>
  );
};

export default SightingModal;