"use client";

import { useEffect, useRef, useState } from "react";

interface FAQItemData {
  q: string;
  a: string;
}

function FAQItem({
  q,
  a,
  open,
  onToggle,
}: FAQItemData & { open: boolean; onToggle: () => void }) {
  const ref = useRef<HTMLDivElement>(null);
  const [height, setHeight] = useState(0);

  useEffect(() => {
    setHeight(open ? (ref.current?.scrollHeight ?? 0) : 0);
  }, [open]);

  return (
    <div className="b-faq-item">
      <button
        className="b-faq-q"
        aria-expanded={open}
        onClick={onToggle}
      >
        {q}
        <svg className="b-faq-icon" viewBox="0 0 24 24" fill="none">
          <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" />
        </svg>
      </button>
      <div
        className="b-faq-a"
        ref={ref}
        style={{ maxHeight: height }}
      >
        <div className="b-faq-a-inner">{a}</div>
      </div>
    </div>
  );
}

interface BlogFAQProps {
  items: readonly FAQItemData[];
}

export function BlogFAQ({ items }: BlogFAQProps) {
  const [open, setOpen] = useState(0);

  return (
    <div className="b-faq">
      {items.map((item, i) => (
        <FAQItem
          key={i}
          {...item}
          open={open === i}
          onToggle={() => setOpen(open === i ? -1 : i)}
        />
      ))}
    </div>
  );
}