import type { DecodeReading } from "../../../../../types/types";

type PlatePatchModalContentProps = {
  currentPatch: DecodeReading | null;
  direction?: "entry" | "exit";
};

const PlatePatchModalContent = ({ currentPatch, direction }: PlatePatchModalContentProps) => {
  const imageSrc = `data:image/png;base64,${currentPatch?.plate || ""}`;
  const imageUrl = currentPatch ? imageSrc : "";

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between border-b border-gray-600 pb-3">
        <h2
          className={`font-mono font-bold text-3xl tracking-wide
          ${direction === "entry" ? "text-blue-400" : "text-red-400"}`}
        >
          {currentPatch?.vrm}
        </h2>
        <span
          className={`px-3 py-1 rounded-full text-xs font-semibold uppercase
          ${direction === "entry" ? "bg-blue-500/20 text-blue-400" : "bg-red-500/20 text-red-400"}`}
        >
          {direction === "entry" ? "Entry" : "Exit"}
        </span>
      </div>

      <div className="border border-gray-600 rounded-2xl">
        <div className="flex  bg-gray-800/50 rounded-lg p-4">
          <img
            src={imageUrl}
            alt={`${direction === "entry" ? "Entry" : "Exit"} Image for ${currentPatch?.vrm || "N/A"}`}
            className="rounded-lg border border-gray-600 max-w-full h-auto shadow-lg"
          />
        </div>

        <div className="grid grid-cols-2 gap-4 bg-gray-800/30 rounded-lg p-4">
          <div className="space-y-1">
            <p className="text-gray-400 text-xs uppercase tracking-wider">Bay ID</p>
            <p className="text-gray-200 font-semibold text-lg">{currentPatch?.laneID || "N/A"}</p>
          </div>

          <div className="space-y-1">
            <p className="text-gray-400 text-xs uppercase tracking-wider">Seen Count</p>
            <p className="text-gray-200 font-semibold text-lg">{currentPatch?.seenCount || "N/A"}</p>
          </div>

          <div className="space-y-1 col-span-2">
            <p className="text-gray-400 text-xs uppercase tracking-wider">First Seen</p>
            <p className="text-gray-300 text-sm">{currentPatch?.firstSeenTimeHumane || "N/A"}</p>
          </div>

          <div className="space-y-1 col-span-2">
            <p className="text-gray-400 text-xs uppercase tracking-wider">Last Seen</p>
            <p className="text-gray-300 text-sm">{currentPatch?.lastSeenTimeHumane || "N/A"}</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PlatePatchModalContent;