// lib/gallery-views.tsx
import { Link } from "lucide-react";
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>
    ),
  },
];

export const getLinkedViews = () => [
  {
    id: "1",
    content: (
      <Link
        href="https://www.facebook.com/share/g/15jdqESvWV/?mibextid=wwXIfr"
        className="w-full h-full block text-inherit box-border"
      >
        <div className="w-full h-full p-6 flex  text-black  bg-blue-50 rounded-4xl border-[0.5px] border-[#113768]/30">
          <div className="">
            <h3 className="text-2xl text-[#113768] font-black">
              Meet, Share, and Learn!
            </h3>
            <p className="font-bold text-sm text-[#113768] ">
              Join Facebook Community
            </p>
          </div>
          <div className="flex justify-center items-center shrink-0">
            <Image
              src="/images/static/facebook-logo.png"
              alt="Facebook Logo"
              width={150}
              height={150}
            />
          </div>
        </div>
      </Link>
    ),
  },
];