import { GB } from "country-flag-icons/react/3x2";
import { formatNumberPlate } from "../../utils/utils";
import type { SightingType } from "../../types/types";

type NumberPlateProps = {
  sighting: SightingType;
};

const NumberPlate = ({ sighting }: NumberPlateProps) => {
  return (
    <div
      className={`relative w-[8rem] border-4 border-black rounded-lg text-nowrap
      text-black px-3 
      ${sighting?.motion !== "towards" ? "bg-yellow-400" : "bg-white"}
      `}
    >
      <div className="">
        <div className="absolute inset-y-0 left-0 bg-blue-600 w-4 flex flex-col">
          <GB />
        </div>
        <p className=" pl-2 font-extrabold text-right">
          {formatNumberPlate(sighting?.vrm)}
        </p>
      </div>
    </div>
  );
};

export default NumberPlate;