import React, { useState } from "react";
import { motion } from "framer-motion";

export default function FAQ() {
    const [expanded, setExpanded] = useState<number | null>(null); // Track the expanded section

    const toggleAccordion = (index: number) => {
        setExpanded(expanded === index ? null : index);
    };

    return (
        <section className="relative bg-gradient-to-tr from-blue-100 via-transparent dark:from-blue-950 dark:via-transparent">
            <div className="lg:mx-12 pb-16 mx-2">
                <div className="max-w-[85rem] px-4 py-8 sm:px-6 lg:px-8 lg:py-8 mx-auto grid md:grid-cols-5 gap-10">
                    <div className="md:col-span-2">
                        <div className="max-w-xs">
                            <h2 className="text-2xl font-bold md:text-4xl md:leading-tight">Frequently<br />asked questions</h2>
                            <p className="mt-1 text-sm hidden md:block text-gray-500">Trusted by more than 10k+ students and institutions.</p>
                        </div>
                    </div>

                    <div className="md:col-span-3">
                        <div className="divide-y divide-gray-200">
                            {faqData.map((faq, index) => (
                                <div className="py-6" key={index}>
                                    <button
                                        className={`inline-flex items-center justify-between w-full font-semibold text-left rounded-lg transition focus:outline-none ${
                                            expanded === index ? "text-indigo-600" : "text-gray-800"
                                        } hover:text-indigo-600`}
                                        onClick={() => toggleAccordion(index)}
                                        >

                                        {faq.question}
                                        <svg
                                            className={`shrink-0 w-5 h-5 transition-transform ${expanded === index ? "rotate-180" : ""}`}
                                            xmlns="http://www.w3.org/2000/svg"
                                            fill="none"
                                            viewBox="0 0 24 24"
                                            stroke="currentColor"
                                        >
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 9l6 6 6-6" />
                                        </svg>
                                    </button>
                                    <motion.div
                                        initial={false}
                                        animate={{ height: expanded === index ? "auto" : 0 }}
                                        transition={{ duration: 0.3 }}
                                        className="overflow-hidden"
                                    >
                                        <div className="pt-4 text-gray-600">
                                            {faq.answer}
                                        </div>
                                    </motion.div>
                                </div>
                            ))}
                    </div>
                </div>
            </div>
        </div>
        </section >
    );
}

// Example FAQ data
const faqData = [
    {
        question: "Is there any scholarship?",
        answer: 'Yes, for more reference, please visit this page here.'
    },
    {
        question: "Can I attempt a test anytime?",
        answer: "There is no specified date to take the exam. You can take the test anytime once it's uploaded.",
    },
    {
        question: "How many times can I attempt a test?",
        answer: "You can attempt a test only once. We do not allow re-attempting the same test. However, you can review the test and its solutions as many times as you want until the test series expires.",
    },
    {
        question: "Is there any refund policy?",
        answer: "No. The fee paid is non-refundable in any case.",
    },
    {
        question: "Can I take the test on my mobile?",
        answer: "Yes, you can take the tests on any device like mobile, PC, laptop with a suitable browser. However, we recommend taking the test on a laptop/PC.",
    },
];