import { useState } from "preact/hooks";

export function QuestionList(props: { questions: FrequentlyAskedQuestion[]; }) {
    const [ open, setOpen ] = useState<number | null>(null);

    const toggle = (index: number) => {
        setOpen(open === index ? null : index);
    };

    return (
        <div class="w-full">
            { props.questions.map((question, index: number) => (
                <div
                    onClick={() => toggle(index)}
                    key={index}
                    className={`w-full overflow-hidden border-l border-r border-t ${open === index && "bg-amber-200"} ${index !== 0 && (index + 1 !== props.questions.length) && "border-amber-300"} ${index === 0 && "rounded-t-2xl border-t border-amber-300"} ${(index + 1) === props.questions.length && "rounded-b-2xl border-b border-amber-300 shadow-md"}`}
                >
                    <h4 class={`text-lg font-semibold transition py-3 px-5 select-none cursor-pointer`}>{ question.question }</h4>
                    <div
                        className={`grid transition-all duration-300 ease-in-out ${
                            open === index ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
                        }`}
                    >
                        <div className="overflow-hidden">
                            <div className="px-5 py-3 bg-white text-sm text-gray-700">
                                {question.answer}
                            </div>
                        </div>
                    </div>
                </div>  
            )) }
        </div>  
    )
}