import Link from "next/link";
import type { Metadata } from "next";

import { Container } from "@/components/Container";
import { getAllQuestionsWithContext } from "@/lib/frcs";
import { ReviewClient } from "./ReviewClient";

export const metadata: Metadata = {
  title: "Review — OrthoPrep quiz",
  description: "Re-attempt questions you previously answered incorrectly.",
};

export const dynamic = "force-dynamic";

export default async function QuizReviewPage() {
  const bank = await getAllQuestionsWithContext();

  return (
    <section className="bg-gradient-to-b from-white via-white to-[var(--color-mist)]/40 pt-10 pb-10 md:pt-14 md:pb-14">
      <Container>
        <div className="mx-auto max-w-3xl">
          <div className="mb-8 flex flex-wrap items-center justify-between gap-3 text-[13px]">
            <Link
              href="/products/orthoprep/quiz"
              className="font-semibold text-[var(--color-blue)] underline underline-offset-2"
            >
              &larr; Quiz hub
            </Link>
            <span className="rounded-full border border-[var(--color-line)] bg-white px-3 py-1 text-[11px] font-bold uppercase tracking-wider text-[var(--color-slate)]">
              Review mode
            </span>
          </div>

          <ReviewClient bank={bank} />
        </div>
      </Container>
    </section>
  );
}
