"use client";
import { useState } from "react";
// FAQ 数据
const faqList = [
  {
    question: "Tracking Number & Where Can I Find It?",
    answer: `Your tracking number will be sent to you via email along with detailed order information. You can use the order number or tracking number to track your package here. If you have any further questions, feel free to contact us at: service@asteriahair.com.`,
  },
  {
    question: "Why Can't I Track My Order?",
    answer: `The tracking information may not be updated immediately after shipping. Please recheck after 24-48 hours. Or you can contact us via live chat or mail to:service@asteriahair.com`,
  },
  {
    question: "Why Is My Order Still Processing?",
    answer: `Most of orders processed within 72 hours, but if the product is customized wig, hot-selling wig or length, the processing time may be delayed by 2-3 days. Please don't worry, we will try our best to ship your package out ASAP.`,
  },
  {
    question: "Delivery Failed, What Should I Do?",
    answer: `If the delivery failed, we will notify you to pick it up by SMS/Email. Please contact the logistics company for re-delivery or pick it up by yourself. Otherwise, the loss caused by not picking up the package in time shall be borne by yourself.`,
  },
];
export default function TrackFaqs() {
  // 当前展开的FAQ索引，null=全部收起
  const [activeIndex, setActiveIndex] = useState<number | null>(null);

  // 切换折叠面板（互斥，只展开一个）
  const toggleFaq = (idx: number) => {
    setActiveIndex(activeIndex === idx ? null : idx);
  };

  return (
    <div>
      {faqList.map((item, idx) => (
        <div
          key={idx}
          className={`border-t border-gray-200 ${idx === 0 ? "border-t-0" : ""}`}
        >
          {/* 问题标题栏 */}
          <button
            type="button"
            onClick={() => toggleFaq(idx)}
            className="w-full flex justify-between items-center px-6 py-5 text-left text-lg"
          >
            <span>Q:{item.question}</span>
            {/* 上下箭头图标 */}
            <svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.8"
              strokeLinecap="round"
              strokeLinejoin="round"
              className={`transition-transform duration-200 ${
                activeIndex === idx ? "rotate-180" : ""
              }`}
            >
              <path d="M18 15l-6-6-6 6" />
            </svg>
          </button>
          {/* 回答内容，展开/收起 */}
          <div
            className={`px-6 overflow-hidden transition-all duration-300 ${
              activeIndex === idx ? "max-h-[800px] pb-6" : "max-h-0"
            }`}
          >
            <p className="text-base leading-relaxed text-gray-800">
              A:{item.answer}
            </p>
          </div>
        </div>
      ))}
    </div>
  );
}
