front/src/components/ResultContainer.tsx

import { useEffect, useState } from "react";
import { fetchResult } from "@/VerificationScene.tsx";

export default function ResultContainer({
  sendImageToServer,
  idCardPicture,
  profileImage,
}: {
  sendImageToServer: (
    pic: string,
    pic2: string,
    setLoading: (n: fetchResult) => void,
  ) => void;
  idCardPicture: string;
  profileImage: string;
}) {
  const [loading, setLoading] = useState<fetchResult>("Fetching");

  useEffect(() => {
    sendImageToServer(idCardPicture ?? "", profileImage ?? "", setLoading);
  }, []);
  return (
    <div className="flex w-full h-full items-center justify-center">
      {loading === "Fetching" ? (
        <h1 className="text-2xl font-bold text-orange-600">Fetching....</h1>
      ) : loading === "Valid" ? (
        <h1 className="text-2xl font-bold text-green-800">Valid</h1>
      ) : loading === "Not Valid" ? (
        <h1 className="text-2xl font-bold text-green-800">Not Valid</h1>
      ) : (
        <h1 className="text-2xl text-red-700">Error</h1>
      )}
    </div>
  );
}