"use client"
import { LoadingForm } from '@/components/Form/loadingForm';
import { Empty } from '@/components/common/Empty';
import { useGetFAQsQuery } from '@/services/FAQ';
import React, { useState } from 'react'
import AnimateHeight from 'react-animate-height';

export const ComponentsFAQ = () => {
    const { currentData: data, isFetching } = useGetFAQsQuery({});
    if (isFetching) {
        return <LoadingForm />
    }
    return (
        <div>
            <div className='flex flex-col gap-4 justify-center items-center'>
                <div className="text-center text-black text-opacity-90 text-[32px] font-bold font-['Alexandria'] leading-[56px]">الاسئلة الشائعة</div>

                <div className='w-full flex-col gap-6 flex '>
                    {data?.details?.docs?.map((item, index) => (
                        <RowQuestion key={index} item={item} />
                    ))}
                    {data?.details?.docs?.length == 0 &&
                        <Empty />
                    }

                </div>
            </div>
        </div>
    )
}


export const RowQuestion = ({ item }: {
    item: {
        id: string;
        title: string;
        description: string;
        status: boolean;
    }
}) => {
    const [active, setActive] = useState<string>(' ');
    const togglePara = (value: string) => {
        setActive((oldValue) => {
            return oldValue === value ? '' : value;
        });
    };
    return (
        <div>
            <div className={`p-4 bg-white rounded-3xl border border-primary ${active === '1' ? "border-primary" : "border-zinc-300"}  w-full`}>
                <button type="button" className={`flex w-full justify-between items-center px-4 text-white-dark dark:bg-[#1b2e4b] ${active === '1' ? '!text-primary' : ''}`} onClick={() => togglePara('1')}>
                    <div className="text-black text-opacity-90 text-2xl font-medium font-['Alexandria'] leading-9" >
                        {item.title}
                    </div>
                    <div className={`relative ${active === "1" ? "rotate-90 " : "-rotate-90"}`} >
                        <svg width="35" height="42" viewBox="0 0 35 42" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M23 8.76379L12.7917 20.2368L23 31.7097" stroke="black" stroke-opacity="0.37" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                        </svg>
                    </div>

                </button>
                <div>
                    <AnimateHeight duration={300} height={active === '1' ? 'auto' : 0}>

                        <div className="text-justify text-black text-opacity-60 text-lg font-normal font-['Alexandria'] leading-[27px] px-4">
                            {item.description}
                        </div>

                    </AnimateHeight>
                </div>
            </div>
        </div>
    )
}