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-10 max-w-6xl px-6">
      <div className="rounded-3xl border border-border bg-background/80 backdrop-blur-sm p-6 shadow-sm">
        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">FAQ</p>
        <h2 className="mt-3 text-2xl font-semibold text-foreground">
          {title ?? "Common questions, clear answers."}
        </h2>
        <p className="mt-2 text-sm text-muted-foreground">
          {subtitle ??
            "Find pricing, account, export, and security answers for LedgerOne."}
        </p>
        <ol className="mt-6 space-y-5 text-sm text-muted-foreground">
          {items.map((item, index) => (
            <li key={item.question} className="space-y-2">
              <p className="text-xs font-semibold uppercase tracking-wide text-foreground">
                {index + 1}. {item.question}
              </p>
              <p className="text-muted-foreground leading-relaxed">{item.answer}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}