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

type NumberPlateProps = {
  vrm?: string | undefined;
  motion?: boolean;
};

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

export default NumberPlate;