import { useState } from "react";
import { Plus, Minus } from "lucide-react";
import { FAQ as FAQ_DATA } from "@/lib/site";

export function FAQ({ items = FAQ_DATA }: { items?: { q: string; a: string }[] }) {
  const [open, setOpen] = useState<number | null>(0);
  return (
    <div className="max-w-3xl mx-auto divide-y divide-border rounded-2xl border border-border bg-card shadow-soft">
      {items.map((item, i) => {
        const isOpen = open === i;
        return (
          <div key={item.q}>
            <button
              onClick={() => setOpen(isOpen ? null : i)}
              className="w-full flex items-center justify-between gap-4 p-5 md:p-6 text-left hover:bg-muted/50 transition-colors"
              aria-expanded={isOpen}
            >
              <span className="font-display font-semibold text-foreground">{item.q}</span>
              {isOpen ? <Minus className="h-5 w-5 text-emerald flex-shrink-0" /> : <Plus className="h-5 w-5 text-muted-foreground flex-shrink-0" />}
            </button>
            {isOpen && (
              <div className="px-5 md:px-6 pb-6 -mt-2 text-muted-foreground leading-relaxed">{item.a}</div>
            )}
          </div>
        );
      })}
    </div>
  );
}