"use client";

import { useState } from "react";

export function FaqAccordion({ items }: { items: { q: string; a: string }[] }) {
  const [open, setOpen] = useState<number | null>(0);

  return (
    <div className="divide-y divide-navy/10 rounded-card border border-navy/10">
      {items.map((item, i) => (
        <div key={item.q}>
          <button
            onClick={() => setOpen(open === i ? null : i)}
            className="flex w-full items-center justify-between p-6 text-left"
          >
            <span className="font-heading font-medium">{item.q}</span>
            <span className="text-navy/40">{open === i ? "−" : "+"}</span>
          </button>
          {open === i && <p className="px-6 pb-6 text-sm text-navy/65">{item.a}</p>}
        </div>
      ))}
    </div>
  );
}