// lib/resultViews.tsx
import Image from "next/image";

interface ExamResults {
  score: number;
  totalQuestions: number;
  answers: string[];
}

export const getResultViews = (examResults: ExamResults | null) => [
  {
    id: 1,
    content: (
      <div className="w-full">
        <div className="bg-blue-50/60 border border-[#113678]/50 rounded-4xl h-[170px] flex flex-col items-center justify-center gap-4">
          <div className="text-xl text-black">
            <span className="font-bold">Accuracy</span> Rate:
          </div>
          <div className="flex gap-4">
            <Image
              src="/images/icons/accuracy.png"
              alt="accuracy"
              width={60}
              height={60}
            />
            <h2 className="text-6xl font-bold text-[#113678]">
              {examResults
                ? (
                    (examResults.score / examResults.totalQuestions) *
                    100
                  ).toFixed(1)
                : "0"}
              %
            </h2>
          </div>
        </div>
      </div>
    ),
  },
  {
    id: 2,
    content: (
      <div className="w-full">
        <div className="bg-blue-50/60 border border-[#113678]/50 rounded-4xl h-[170px] flex flex-col items-center justify-center gap-3">
          <div className="text-xl text-black">
            <span className="font-bold">Error</span> Rate:
          </div>
          <div className="flex gap-4">
            <Image
              src="/images/icons/error.png"
              alt="error"
              width={60}
              height={60}
            />
            <h2 className="text-6xl font-bold text-[#113678]">
              {examResults
                ? (
                    ((examResults.totalQuestions - examResults.score) /
                      examResults.totalQuestions) *
                    100
                  ).toFixed(1)
                : "0"}
              %
            </h2>
          </div>
        </div>
      </div>
    ),
  },
  {
    id: 3,
    content: (
      <div className="my-8 w-full">
        <div className="bg-blue-50/60 border border-[#113678]/50 rounded-4xl h-[170px] flex flex-col items-center justify-center gap-4">
          <div className="text-xl text-black">
            <span className="font-bold">Attempt</span> Rate:
          </div>
          <div className="flex gap-4">
            <Image
              src="/images/icons/attempt.png"
              alt="attempt"
              width={60}
              height={60}
            />
            <h2 className="text-6xl font-bold text-[#113678]">
              {examResults
                ? (
                    (examResults.answers.length / examResults.totalQuestions) *
                    100
                  ).toFixed(1)
                : "0"}
              %
            </h2>
          </div>
        </div>
      </div>
    ),
  },
];