import FaqsContent from "@/app/components/faqs/FaqsContent"
import Container from "@/app/components/shared/container"
import { HeaderWrwpper } from "@/app/components/shared/main-header"
import { getFaqs } from "@/lib/serverActions"
import { getTranslations } from "next-intl/server"
import { Icon } from "@iconify/react"
import { Metadata } from "next"

interface LayoutProps {
    params: Promise<{ locale: string | any }> // Handle both promise and object
}

export async function generateMetadata({params}:LayoutProps) : Promise<Metadata> {
    const t = await getTranslations("meta")
    return{
           title: t("faqs.title"),
           description: t("faqs.description"),
    }
} 
export default async function FAQs({ params }: LayoutProps) {
    const { locale } = await params
    const t = await getTranslations("Header")
    const { data: faqs } = await getFaqs(locale)
    

    return (
        <div className="min-h-[438px] w-full">
            <header>
                <HeaderWrwpper imgUrl={faqs?.headerByImage?.image?.original_url}>
                    <div className="flex flex-col items-center justify-center h-full w-full">
                        <div 
                            className="flex flex-col gap-6"
                            data-aos="fade-up"
                            data-aos-duration="800"
                        >
                            <h1 className="text-[40px] font-medium text-center">{t("faqs")}</h1>
                            <div className="text-[14px] text-center font-[300px] flex items-center justify-center gap-2">
                                {t("Home")} <Icon className="text-2xl text-[#fff]" icon="weui:arrow-filled" />{" "}
                                {t("faqs")}
                            </div>
                        </div>
                    </div>
                </HeaderWrwpper>
            </header>
            <Container className="mt-10 mb-14">
                <div className="header-fixed page no-sidebar header-style-2 topbar-style-1 menu-has-search">
                    <div id="wrapper">
                        <div id="page" className="clearfix">
                            <div id="site-header-wrap">{/* <Header data={headers} /> */}</div>
                            {/* <Banner data={banners} /> */}
                            <div
                                id="main-content"
                                className="site-main clearfix !p-0 md:min-h-[calc(100vh-101px-88px-76px)]"
                            >
                                <div id="content-wrap">
                                    <div id="site-content" className="site-content clearfix">
                                        <div id="inner-content" className="inner-content-wrap">
                                            <div className="page-content">
                                                <div className="container pt-11 pb-11">
                                                    <div 
                                                        className="mb-20"
                                                        data-aos="fade-up"
                                                        data-aos-duration="800"
                                                    >
                                                        <div className="themesflat-headings style-2 mb-20">
                                                            <h2 className="heading font-semibold text-2xl relative after:content-[''] after:block after:w-20 after:h-1 after:bg-primary after:mt-2">
                                                                {t("faqs")}
                                                            </h2>
                                                            <div className="sep has-width w80 accent-bg clearfix" />
                                                        </div>
                                                    </div>
                                                    <div 
                                                        data-aos="fade-up"
                                                        data-aos-duration="800"
                                                        data-aos-delay="200"
                                                    >
                                                        <FaqsContent data={faqs?.data} />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {/* <BottomBar /> */}
                        </div>
                    </div>
                </div>
            </Container>
        </div>
    )
}