"use client"
import useGetQuery from "@/hooks/useGetQuery"
import { images } from "@/lib/images"
import Image from "next/image"
import MotionEl from "../shared/animation/MotionEl"

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

    if (!data) return null

    return (
        <section className="bg-white container flex justify-between items-center w-full lg:space-x-7 py-20 flex-col-reverse rtl:lg:flex-row-reverse ltr:lg:flex-row">
            <MotionEl
                element="div"
                className="w-full max-lg:mt-9 rounded-xl overflow-hidden"
                animationType="right"
            >
                <Image
                    className="w-full h-[300px] sm:h-[350px] md:h-[400px] lg:h-[450px] object-cover"
                    src={
                        data?.data?.images?.length > 0
                            ? // @ts-ignore
                              data?.data?.images[0].original_url
                            : images.mask
                    }
                    alt="logo"
                    width={500}
                    height={600}
                />
            </MotionEl>

            <MotionEl
                className="w-full lg:px-10"
                element="div"
                animationType="left"
            >
                <h2 className="text-2xl md:text-3xl lg:text-4xl mb-4">
                    {data?.data?.text?.[lang]}
                </h2>
                <p className="text-mainGray">
                    {data?.data?.description?.[lang]}
                </p>
            </MotionEl>
        </section>
    )
}

export default AboutSection