"use client"
import useGetQuery from "@/hooks/useGetQuery"
import WhatWeDo from "./WhatWeDo"
import GoalsCard from "./GoalsCard"
import { images } from "@/lib/images"

const AboutContent = ({ lang }: { lang: Lang }) => {
    const { data } = useGetQuery<TermsType>({
        endpoint: "api/setting_web/about",
        queryKey: ["about"],
        staleTime: 50000,
    })

    if (!data) return null

    return (
        <>
            <WhatWeDo
                title={data?.data?.text}
                // @ts-ignore
                description={data?.data?.description}
                lang={lang}
            />
            <div className="pb-28">
                {/* ourVision */}
                <GoalsCard
                    image={images.header}
                    title="vision"
                    lang={lang}
                    endPoint="api/setting_web/ourVision"
                    queryKey={["ourVision", lang]}
                />

                {/* ourMission */}
                <GoalsCard
                    image={images.header}
                    title="mission"
                    lang={lang}
                    endPoint="api/setting_web/ourMission"
                    queryKey={["ourMission", lang]}
                />

                {/* ourGoal */}
                <GoalsCard
                    image={images.header}
                    title="goals"
                    lang={lang}
                    endPoint="api/setting_web/ourGoal"
                    queryKey={["ourGoal", lang]}
                />
            </div>
        </>
    )
}

export default AboutContent