'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="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>
                <h4>{item.question}</h4>
              </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>
    </section>
  );
}