"use client"
import TranslateClient from "@/components/ui/localization/TranslateClient"
import { images } from "@/lib/images"
import Image from "next/image"
import Link from "next/link"

import { ContactsInfo } from "@/modules/contacts/contactsInfo"
import useGetQuery from "@/hooks/useGetQuery"
import MotionEl from "../animation/MotionEl"

const Footer = ({ lang }: { lang: Lang }) => {
  // TODO: unite all contact get "get-contactInfo" in footer (here) and in contact us
  const { data: contactInfoData } = useGetQuery<ContactsInfo>({
    endpoint: `api/setting_web/contacts`,
    queryKey: ["get-contactInfo"],
    select(data: { data: ContactsInfo }): ContactsInfo {
      return data.data
    },
  })

  return (
    <footer className="pt-20 bg-mainOffWhite-200">
      <div className="container text-mainBlack">
        <div className="grid grid-cols-1 lg:grid-cols-2 ">
          <MotionEl element="div" animationType="right">
            <div>
              <div className="mb-5">
                <Image src={images.logo} alt="logo" />
              </div>
              <p className="rtl:pl-7 rtl:lg:pl-36 rtl:xl:pl-48 ltr:pr-7 ltr:lg:pr-36 ltr:xl:pr-48">
                <TranslateClient text="footer_description" />
              </p>
            </div>
          </MotionEl>
          <MotionEl element="div" animationType="left">
            <div className="grid grid-cols-1 md:grid-cols-2 max-lg:mt-10">
              <ul className="mb-5">
                <li className="mb-5 text-2xl">
                  <TranslateClient text="other_pages" />
                </li>
                <li className="py-2">
                  <Link href={`/${lang}/faqs`} className="hover:text-mainBlue duration-200">
                    <TranslateClient text="faqs" />
                  </Link>{" "}
                </li>
                <li className="py-2">
                  <Link href={`/${lang}/terms`} className="hover:text-mainBlue duration-200">
                    <TranslateClient text="terms_conditions" />
                  </Link>{" "}
                </li>
                <li className="py-2">
                  <Link href={`/${lang}/privacy`} className="hover:text-mainBlue duration-200">
                    <TranslateClient text="privacy_policy" />
                  </Link>{" "}
                </li>
              </ul>
              <ul className="mb-5">
                <li className="mb-5 text-2xl">
                  <TranslateClient text="contact" />
                </li>
                <li className="py-2">{contactInfoData?.address?.[lang]}</li>
                <li className="py-2">
                  {/* {contactInfoData?.contacts?.phone1}
                  {" , "}
                  {contactInfoData?.contacts?.phone2}
                  {" , "}
                  {contactInfoData?.contacts?.phone3}
                  {" , "} 
                  {" //////////////// "}
                  {"  "} */}

                  {contactInfoData?.contacts?.phone1 && (
                    <Link href={`https://wa.me/${contactInfoData?.contacts?.phone1}`} target="_blank">
                      {contactInfoData?.contacts?.phone1}
                    </Link>
                  )}
                  {"  ,  "}
                  {contactInfoData?.contacts?.phone2 && (
                    <Link href={`https://wa.me/${contactInfoData?.contacts?.phone2}`} target="_blank">
                      {contactInfoData?.contacts?.phone2}
                    </Link>
                  )}
                </li>
                <li className="py-2">{contactInfoData?.contacts?.email}</li>

                {/* <li className="py-2">
                  <Link href="https://wa.me/+966541618332" target="_blank">
                    0541618332
                  </Link>
                </li>
                <li className="py-2">
                  <Link href="https://wa.me/+966564800048" target="_blank">
                    0564800048
                  </Link>
                </li>
                <li className="py-2">
                  <Link href="https://wa.me/+966549380000" target="_blank">
                    0549380000
                  </Link>
                </li> */}
              </ul>
            </div>
          </MotionEl>
        </div>
      </div>
      <div className="text-center py-2 bg-gray-200 flex align-center justify-center">
        <TranslateClient text="copy_right" />
        <Link href={"https://www.dubisign.ae/en/"} target="_blank" className="w-6 h-6 inline-block mx-2">
          <Image src={images.logodubisign} alt="dubisign" className="w-full h-full" />
        </Link>
      </div>
    </footer>
  )
}

export default Footer