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

import { Container } from "@/components/Container";
import { PageHeader } from "@/components/PageHeader";
import { HistoryView } from "@/components/orthoprep/HistoryView";

export const metadata: Metadata = {
  title: "OrthoPrep quiz history",
  description:
    "Every OrthoPrep quiz attempt you've taken in this browser, with score trend and per-attempt breakdown.",
};

export const dynamic = "force-dynamic";

export default async function QuizHistoryPage() {
  return (
    <>
      <PageHeader
        eyebrow="OrthoPrep · Quiz"
        title="Your quiz history"
        lede="Every attempt you've taken in this browser, with score trend and per-attempt breakdown. History is stored locally — no account required."
      />
      <Container className="pb-14 md:pb-16">
        <div className="mx-auto max-w-4xl">
          <div className="mb-8 flex flex-wrap items-center gap-3 text-[13px] text-[var(--color-slate)]">
            <Link
              href="/products/orthoprep/quiz"
              className="font-semibold text-[var(--color-blue)] underline underline-offset-2"
            >
              ← Back to quiz hub
            </Link>
            <span className="text-[var(--color-line)]">•</span>
            <Link
              href="/products/orthoprep"
              className="font-semibold text-[var(--color-blue)] underline underline-offset-2"
            >
              OrthoPrep home
            </Link>
          </div>
          <HistoryView />
        </div>
      </Container>
    </>
  );
}
