"use client";

import { useState, useRef, useEffect } from "react";
import { ChevronDown } from "lucide-react";

interface FaqItem {
  question: string;
  answer: string;
}

interface FAQ2Props {
  heading?: string;
  items?: FaqItem[];
}

export default function FAQ2({
  heading = "Frequently Asked Questions",
  items = [
    {
      question: "Lorem ipsum dolor sit amet?",
      answer:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et diam vel erat pellentesque tincidunt. Donec ultricies lacus ac elit congue, et scelerisque dolor sagittis.",
    },
    {
      question: "Sed do eiusmod tempor incididunt?",
      answer:
        "Yes! Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    },
    {
      question: "Duis aute irure dolor in reprehenderit?",
      answer:
        "Yes! Whether you're working with clients or building a personal project, you are free to use this boilerplate.",
    },
    {
      question: "Excepteur sint occaecat cupidatat non proident?",
      answer:
        "You can check out our live demo to see what’s included. Visit example.com/demo for more details.",
    },
    {
      question: "Ut enim ad minima veniam?",
      answer:
        "Yes, you can use it as long as you are comfortable with modern web technologies.",
    },
    {
      question: "Quis autem vel eum iure reprehenderit?",
      answer:
        "You can submit any request to support@example.com, and we will get back to you as soon as possible.",
    },
  ],
}: FAQ2Props) {
  const [activeIndex, setActiveIndex] = useState<number | null>(null);
  const contentRefs = useRef<Array<HTMLDivElement | null>>([]);

  const toggleFAQ = (index: number) => {
    setActiveIndex(activeIndex === index ? null : index);
  };

  useEffect(() => {
    items.forEach((_, index) => {
      const element = contentRefs.current[index];
      if (element) {
        element.style.height =
          activeIndex === index ? `${element.scrollHeight}px` : "0px";
      }
    });
  }, [activeIndex, items]);

  return (
    <div className="lg:max-w-3xl py-28 px-6 lg:px-8 mx-auto">
      <div className="flex flex-col gap-10">
        <h2 className="max-sm:text-3xl sm:text-4xl font-medium max-md:text-center md:leading-tight text-center mb-3">
          {heading}
        </h2>

        <div className="hs-accordion-group">
          {items.map((faq, index) => (
            <div
              key={index}
              className="hs-accordion pt-6 pb-3 border-b border-gray-200"
            >
              <button
                className="hs-accordion-toggle cursor-pointer group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-medium text-start text-gray-800 rounded-lg transition focus:outline-none"
                aria-expanded={activeIndex === index}
                onClick={() => toggleFAQ(index)}
              >
                {faq.question}
                <ChevronDown
                  className={`text-gray-600 transition ease-in-out duration-300 group-hover:text-gray-500 ${
                    activeIndex === index ? "rotate-180" : "rotate-0"
                  }`}
                  size={20}
                />
              </button>
              <div
                ref={(el) => {
                  contentRefs.current[index] = el;
                }}
                className="hs-accordion-content overflow-hidden transition-[height] duration-300 ease-in-out"
                style={{ height: "0px" }}
                role="region"
              >
                <div className="faq-content py-3">{faq.answer}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
FAQ-2
