import { createSignal, Show } from 'solid-js';
import { FaSolidChevronDown } from 'solid-icons/fa';
import type { FaqItem, FaqProps } from '@/types/globalInterfaces';

const Faq = (props: FaqProps) => {
    const [openIndex, setOpenIndex] = createSignal<number | null>(null);

    const toggleAccordion = (index: number) => {
        setOpenIndex(openIndex() === index ? null : index);
    };

    return (
        <section class="bg-white py-20 md:py-28">
            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-12">
                    <h2 class="text-3xl md:text-4xl font-bold text-gray-900">
                        Häufig gestellte Fragen
                    </h2>
                    <p class="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">
                        Wir haben die Antworten auf die häufigsten Fragen zu unserem Service
                        hier für Sie zusammengestellt.
                    </p>
                </div>

                <div class="space-y-3">
                    {props.faqItems.map((item, index) => (
                        <div class="border border-gray-200 rounded-lg overflow-hidden">
                            <button
                                type="button"
                                class="w-full flex justify-between items-center p-4 bg-gray-50 hover:bg-gray-100 text-left cursor-pointer"
                                onClick={() => toggleAccordion(index)}
                            >
                                <span class="font-medium text-gray-900 pr-4">{item.question}</span>
                                <FaSolidChevronDown
                                    class={`flex-shrink-0 transform transition-transform duration-300 ${
                                        openIndex() === index ? 'rotate-180 text-blue-600' : 'text-blue-600'
                                    }`}
                                />
                            </button>

                            <div
                                class={`transition-all duration-300 ease-in-out overflow-hidden ${
                                    openIndex() === index ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'
                                }`}
                            >
                                <div class="p-4 bg-white border-t border-gray-200">
                                    <p class="text-gray-600">{item.answer}</p>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default Faq;