import YogaImageComponent from "@/components/yoga.image.component";
import {YogaFaqQa_Plain} from "@/types/generated-strapi-interfaces/api/yoga-faq-qa";
import clsx from "clsx";

import classes from "./faq.qa.module.scss";
import {useEffect, useState} from "react";

export interface Props{
    id:  number,
    qa: YogaFaqQa_Plain,
    isOpen: boolean,
    onClick: (id: number) => void
}
export default function FaqQaComponent({id,qa,isOpen,onClick}: Props){



    return (
        <div className="accordion-card">
            <div className="card-header" id={"heading" + id}>
                <a href="#"
                //    onClick={ (event) => {
                //     event.preventDefault();
                //     onClick(id)
                // }}
                   className={clsx("btn", "btn-link", {"collapsed": !isOpen})}
                   data-toggle="collapse" data-target={"#collapse" + id}
                   aria-expanded="false" aria-controls={"collapse" + id}>
                    <h6>{qa.question}</h6>
                </a>
            </div>
            <div id={"collapse" + id} className={clsx(
                {
                    "collapse": true,
                    "show": isOpen,
                }
                )} aria-labelledby={"heading" + id}>
                <div className="card-body">
                    <div className="faq_wrapper">
                        <figure className="mb-0">
                            <YogaImageComponent
                                src="./assets/images/faq_bar_line.png" alt=""
                                className="img-fluid"/>
                        </figure>
                        <p className="text-left mb-0 p-0">{qa.answer}</p>
                    </div>
                </div>
            </div>
        </div>

    );
}