"use client"

import { NextPage } from 'next'
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
import Layout from '@/hoc/Layout'
import { useGetFaq } from './hooks/useFaqData'
import { FaqItem } from './types/Types'
import PageLoading from '@/components/PageLoading'

const FaqPage: NextPage = () => {

    const { data, isLoading, error } = useGetFaq('Faq');

    if (isLoading) {
        return (
            <Layout>
                <PageLoading />
            </Layout>
        )
    }

    if (error) {
        return (
            <Layout>
                <div className="min-h-screen bg-white py-6 px-4 sm:py-8 sm:px-6 md:py-12 md:px-8 lg:px-20">
                    <div className="text-center">
                        <h1 className="text-lg sm:text-xl md:text-2xl font-bold text-gray-800 mb-4">
                            خطا در بارگذاری اطلاعات
                        </h1>
                        <p className="text-gray-600 text-sm sm:text-base">
                            متاسفانه در بارگذاری سوالات متداول مشکلی پیش آمده است. لطفا دوباره تلاش کنید.
                        </p>
                    </div>
                </div>
            </Layout>
        )
    }

    const faqData: FaqItem[] = data?.results?.faqs || []

    return (
        <Layout>
            <div className="min-h-screen bg-white py-6 px-4 sm:py-8 sm:px-6 md:py-12 md:px-8 lg:px-20">
                <div className="">
                    {/* Header Section */}
                    <div className="mb-8 sm:mb-10 md:mb-12">
                        <h1 className="text-lg sm:text-xl md:text-2xl font-bold text-gray-800 mb-2 sm:mb-3">
                            سوالات متداول
                        </h1>
                        {/* <p className="text-gray-600 text-sm sm:text-base leading-relaxed mx-auto max-w-3xl">
                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است
                        </p> */}
                    </div>

                    {/* FAQ Section */}
                    <div className="space-y-2 sm:space-y-4 max-w-4xl mx-auto">
                        <Accordion type="single" collapsible className="w-full">
                            {faqData.map((item, index) => (
                                <AccordionItem
                                    key={index}
                                    value={`item-${index}`}
                                    className="bg-gray-50 mt-2 sm:mt-4 rounded-lg border-0"
                                >
                                    <AccordionTrigger className="px-3 py-3 sm:px-6 sm:py-5 text-right hover:no-underline">
                                        <span className="text-[#333333] font-light text-sm sm:text-base leading-relaxed">
                                            {item.question}
                                        </span>
                                    </AccordionTrigger>
                                    <AccordionContent className="px-3 pb-3 sm:px-6 sm:pb-5">
                                        <p className="text-[#5D5D5D] font-light leading-relaxed text-xs sm:text-sm">
                                            {item.answer}
                                        </p>
                                    </AccordionContent>
                                </AccordionItem>
                            ))}
                        </Accordion>
                    </div>
                </div>
            </div>
        </Layout>
    )
}

export default FaqPage