import type { ToolFAQ } from "@/tools/registry";

interface ToolFAQProps {
  faqs: ToolFAQ[];
}

export function ToolFAQSection({ faqs }: ToolFAQProps) {
  if (!faqs.length) return null;

  return (
    <section className="mt-12">
      <p
        className="mb-1 text-[0.7rem] font-bold uppercase tracking-[0.18em] text-ink-secondary"
        style={{ fontFamily: '"Courier New", monospace' }}
      >
        FAQ
      </p>
      <h2 className="mb-6 font-display text-xl font-bold uppercase tracking-tight text-ink-primary">
        Häufige Fragen
      </h2>
      <div className="space-y-3">
        {faqs.map((faq, i) => (
          <div key={i} className="border-2 border-ink-primary bg-surface-sunken p-5">
            <h3 className="mb-2 font-display font-bold text-ink-primary">{faq.question}</h3>
            <p className="text-sm leading-6 text-ink-secondary">{faq.answer}</p>
          </div>
        ))}
      </div>
    </section>
  );
}