FAQ Accordion

"use client";
import { useState } from "react";
import { ChevronDown } from "lucide-react";

export function FAQAccordion({ faqs }: { faqs: { q: string; a: string }[] }) {
  const [open, setOpen] = useState<number | null>(null);
  return (
    <div className="space-y-2">
      {faqs.map((f, i) => (
        <div key={i} className="rounded-lg border border-border">
          <button onClick={() => setOpen(open === i ? null : i)}
            className="flex w-full items-center justify-between px-4 py-3 text-left text-sm font-medium">
            <span>{f.q}</span>
            <ChevronDown className={`size-4 shrink-0 transition-transform ${open === i ? "rotate-180" : ""}`} />
          </button>
          {open === i && <div className="px-4 pb-3 text-sm text-muted-foreground">{f.a}</div>}
        </div>
      ))}
    </div>
  );
}