import { defaultFaqs } from "../data/faq";

type FaqSectionProps = {
  title?: string;
  subtitle?: string;
  limit?: number;
};

export function FaqSection({ title, subtitle, limit }: FaqSectionProps) {
  const items = limit ? defaultFaqs.slice(0, limit) : defaultFaqs;
  return (
    <section className="mx-auto mt-16 max-w-6xl px-6">
      <div className="rounded-3xl border border-ink/10 bg-white/80 p-8 shadow-soft">
        <p className="text-xs uppercase tracking-[0.3em] text-muted">FAQ</p>
        <h2 className="mt-3 text-2xl font-semibold">
          {title ?? "Common questions, clear answers."}
        </h2>
        <p className="mt-2 text-sm text-muted">
          {subtitle ??
            "Find pricing, account, export, and security answers for LedgerOne."}
        </p>
        <ol className="mt-6 space-y-5 text-sm text-muted">
          {items.map((item, index) => (
            <li key={item.question} className="space-y-2">
              <p className="text-xs uppercase tracking-[0.2em] text-moss">
                {index + 1}. {item.question}
              </p>
              <p>{item.answer}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}
