FAQ

"use client";
import { useEffect, useState } from "react";
import { ChevronDown } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";

type State = "collapsed" | "single-open" | "all-open";

const FAQS = [
{ q: "可以商用嗎?", a: "免費版限個人專案,Pro 與 Team 版皆可商業使用,且不需署名。" },
{ q: "如何取消訂閱?", a: "前往設定 → 訂閱 → 取消,當期結束後自動轉為免費版,不會被扣款。" },
{ q: "支援哪些框架?", a: "目前主要支援 React + Next.js,Vue 與 Svelte 版本規劃中。" },
{ q: "有 Figma 檔嗎?", a: "Pro 與 Team 用戶可下載對應 Figma Kit,設計變數已綁定 Tailwind tokens。" },
];

export function FAQ({ state = "single-open" }: { state?: State }) {
const [open, setOpen] = useState<Set<number>>(new Set([0]));

useEffect(() => {
  if (state === "collapsed") setOpen(new Set());
  else if (state === "all-open") setOpen(new Set([0, 1, 2, 3]));
  else setOpen(new Set([0]));
}, [state]);

const toggle = (i: number) =>
  setOpen((prev) => {
    const next = new Set(prev);
    next.has(i) ? next.delete(i) : next.add(i);
    return next;
  });

return (
  <div className="w-full max-w-xl">
    <div className="divide-y divide-border rounded-lg border border-border">
      {FAQS.map((f, i) => {
        const isOpen = open.has(i);
        return (
          <div key={i}>
            <button
              onClick={() => toggle(i)}
              className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left text-sm hover:bg-muted/30"
            >
              <span>{f.q}</span>
              <ChevronDown
                className={`h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform ${isOpen ? "rotate-180" : ""}`}
              />
            </button>
            <AnimatePresence initial={false}>
              {isOpen && (
                <motion.div
                  initial={{ height: 0, opacity: 0 }}
                  animate={{ height: "auto", opacity: 1 }}
                  exit={{ height: 0, opacity: 0 }}
                  transition={{ duration: 0.2, ease: "easeOut" }}
                  className="overflow-hidden"
                >
                  <p className="px-4 pb-3 text-xs text-muted-foreground">{f.a}</p>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        );
      })}
    </div>
  </div>
);
}