"use client";

import { useState } from "react";
import { ChevronDown } from "lucide-react";
import type { FaqItem } from "@/lib/types";

export function FaqList({ items }: { items: FaqItem[] }) {
  const [open, setOpen] = useState<number | null>(0);

  return (
    <div className="divide-y divide-[var(--border)] rounded-2xl border border-[var(--border)] bg-white">
      {items.map((it, i) => {
        const isOpen = open === i;
        return (
          <details
            key={i}
            open={isOpen}
            onToggle={(e) => {
              if ((e.target as HTMLDetailsElement).open) setOpen(i);
              else if (isOpen) setOpen(null);
            }}
            className="group"
          >
            <summary className="flex cursor-pointer items-center justify-between gap-4 px-5 py-4 text-sm font-medium text-[var(--navy)] hover:bg-[var(--navy-50)]/60">
              <span>{it.q}</span>
              <ChevronDown
                className={`size-4 shrink-0 text-[var(--muted)] transition ${
                  isOpen ? "rotate-180" : ""
                }`}
              />
            </summary>
            <div className="px-5 pb-5 text-sm leading-relaxed text-[var(--muted)]">
              {it.a}
            </div>
          </details>
        );
      })}
    </div>
  );
}