"use client"; import { useState, useRef, useEffect } from "react"; import { ChevronDown } from "lucide-react"; interface FaqItem { question: string; answer: string; } interface FAQ1Props { heading?: string; subheading?: string; contactEmail?: string; items?: FaqItem[]; } export default function FAQ1({ heading = "Frequently asked questions", subheading = "Have another question? Contact us at", contactEmail = "support@example.com", 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.", }, ], }: FAQ1Props) { const [activeIndex, setActiveIndex] = useState(null); const contentRefs = useRef>([]); 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 (

{heading}

{subheading}{" "} {contactEmail}

{items.map((faq, index) => (

{ contentRefs.current[index] = el; }} className="hs-accordion-content overflow-hidden transition-[height] duration-300 ease-in-out" style={{ height: "0px" }} role="region" >

{faq.answer}

))}

); }

FAQ-1