import type { FaqItem } from '@/lib/content/types';

export function GameFAQ({ faqs }: { faqs: FaqItem[] }) {
  if (faqs.length === 0) return null;

  return (
    <section aria-labelledby="faq-heading">
      <h2 id="faq-heading" className="stat-label mb-3 !text-signal">
        Frequently Asked Questions
      </h2>
      <div className="hud-panel-sm divide-y divide-ink-line/60">
        {faqs.map((faq) => (
          <details key={faq.question} className="group p-4 open:pb-4">
            <summary className="flex cursor-pointer list-none items-center justify-between gap-4 font-display text-base font-semibold">
              {faq.question}
              <span className="shrink-0 font-mono text-signal transition-transform group-open:rotate-45">+</span>
            </summary>
            <p className="prose-content mt-3">{faq.answer}</p>
          </details>
        ))}
      </div>
    </section>
  );
}
