"use client";

import { useState } from "react";
import { categoryBadgeStyle } from "@/lib/colorHash";

export type FaqEntry = { id: string; question: string; answer: string };

export function FaqAccordion({ categories }: { categories: { name: string; items: FaqEntry[] }[] }) {
  const [openId, setOpenId] = useState<string | null>(null);

  return (
    <div className="flex flex-col gap-12">
      {categories.map((cat) => {
        const badge = categoryBadgeStyle(cat.name);
        return (
        <div key={cat.name}>
          <div className="mb-4 flex items-center gap-2.5">
            <span className="h-1.5 w-1.5 shrink-0 rounded-full" style={{ backgroundColor: badge.color }} />
            <h2 className="rk-wordmark text-sm uppercase tracking-[0.14em]">{cat.name}</h2>
          </div>
          <div className="flex flex-col gap-2">
            {cat.items.map((item) => {
              const open = openId === item.id;
              return (
                <div
                  key={item.id}
                  className="overflow-hidden rounded-xl border border-white/10 bg-[var(--rk-surface)]"
                >
                  <button
                    type="button"
                    onClick={() => setOpenId(open ? null : item.id)}
                    className="flex w-full items-center justify-between gap-3 px-5 py-4 text-left text-sm transition-colors hover:bg-white/5"
                    aria-expanded={open}
                  >
                    <span>{item.question}</span>
                    <span
                      className={`shrink-0 text-lg leading-none text-[var(--rk-accent)] transition-transform ${
                        open ? "rotate-45" : ""
                      }`}
                    >
                      +
                    </span>
                  </button>
                  {open && (
                    <p className="whitespace-pre-line px-5 pb-4 text-sm leading-relaxed text-[var(--rk-ink-muted)]">
                      {item.answer}
                    </p>
                  )}
                </div>
              );
            })}
          </div>
        </div>
        );
      })}
    </div>
  );
}