import type { QuizCard } from "@/lib/quiz";
import { QuizListCard } from "./quiz-list-card";

/**
 * Quiz cards, two across from sm up. minmax(0,1fr) + min-w-0: grid items
 * otherwise refuse to shrink below their content, so one long word pushes a
 * card off-screen.
 */
export function QuizGrid({ quizzes }: { quizzes: QuizCard[] }) {
  return (
    <ul className="grid grid-cols-1 gap-3 sm:grid-cols-2">
      {quizzes.map((q) => (
        <li key={q.id} className="min-w-0">
          <QuizListCard q={q} />
        </li>
      ))}
    </ul>
  );
}