"use client"
import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
} from "@/components/ui/accordion"
import useCurrentLanguage from "@/hooks/useCurrentLanguage"
import useGetQuery from "@/hooks/useGetQuery"

export function AccordionComp() {
    const { lang } = useCurrentLanguage()

    const { data } = useGetQuery<FaqsType>({
        endpoint: "api/faq_web",
        queryKey: ["faqs", lang],
        staleTime: 50000,
    })

    if (!data) return null

    return (
        <Accordion type="single" collapsible className="w-full">
            {data?.data?.map(({ id, question, answer }) => (
                <AccordionItem
                    value={`item-${id}`}
                    key={id}
                    className="my-8 border border-slate-200 rounded-xl rtl:[&_.do-not-rotate-me]:left-[16px] ltr:[&_.do-not-rotate-me]:right-[16px]"
                >
                    <AccordionTrigger className="px-4 py-4 font-semibold">
                        {question[lang]}
                    </AccordionTrigger>
                    <hr />
                    <AccordionContent className="mt-4 px-4 text-mainGray">
                        {answer[lang]}
                    </AccordionContent>
                </AccordionItem>
            ))}
        </Accordion>
    )
}