import type { PracticeQuestion } from "@/content/seo/types";

export function PracticeQuestions({
  questions,
}: {
  questions: PracticeQuestion[];
}) {
  if (questions.length === 0) return null;

  return (
    <section className="mt-10">
      <h2 className="text-xl font-bold text-[var(--text-primary)] mb-4">
        Practice Questions
      </h2>
      <div className="space-y-4">
        {questions.map((q, i) => (
          <details
            key={i}
            className="group rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-surface)]"
          >
            <summary className="cursor-pointer px-5 py-4 text-sm font-semibold text-[var(--text-primary)] select-none list-none flex items-start justify-between gap-3">
              <span className="flex gap-2">
                <span className="text-[var(--text-muted)] shrink-0">
                  Q{i + 1}.
                </span>
                <span>{q.question}</span>
              </span>
              <span className="flex items-center gap-2 shrink-0">
                {q.marks && (
                  <span className="text-xs text-[var(--text-muted)] px-1.5 py-0.5 rounded bg-[var(--bg-hover)]">
                    {q.marks}m
                  </span>
                )}
                <svg
                  className="w-4 h-4 text-[var(--text-muted)] transition-transform group-open:rotate-180"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  strokeWidth={2}
                >
                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
                </svg>
              </span>
            </summary>
            <div className="px-5 pb-4 text-sm leading-relaxed text-[var(--text-secondary)] border-t border-[var(--border-subtle)] pt-3 ml-8">
              {q.answer}
            </div>
          </details>
        ))}
      </div>
    </section>
  );
}