'use client';
import { useState } from "react";
import Link from "next/link";

export default function FaqSection({ faqData }) {
  const [isActive, setIsActive] = useState(null);

  const handleToggle = (index) => setIsActive(isActive === index ? null : index);

  if (!faqData || faqData.length === 0) return null;

  return (
    <section className="faq-section pt-5">
      <div className="auto-container">
        <div className="sec-title centred mb_40">
          <h2>Frequently Asked Questions</h2>
        </div>
        <div className="content-box">
          <ul className="accordion-box">
            {faqData.map((item, index) => (
              <li key={index} className="accordion block">
                <div
                  className={isActive === index ? "acc-btn active" : "acc-btn"}
                  onClick={() => handleToggle(index)}
                >
                  <div className="icon-box"><i className="icon-34"></i></div>
                  <h5>{item.question}</h5>
                </div>
                <div className={isActive === index ? "acc-content current" : "acc-content"}>
                  <div className="content">
                    <div className="text"><p>{item.answer}</p></div>
                  </div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}