import Image from "next/image";
// import logo from "../../../../../public/logo.svg"
import logoServer from "@/public/logoServer.svg";
import Container from "../container";
import MainLink from "../main-link";
import { Icon } from "@iconify/react";
import { getContactUs } from "@/lib/serverActions";
import Link from "next/link";
import { getTranslations } from "next-intl/server";
import landlinewhite from "@/public/landlinewhite.svg";
import React from "react";

const Footer = async (params: any) => {
  const { locale: language } = await params;
  const { data } = await getContactUs(language);

  const t = await getTranslations("Header");

  return (
    <footer className=" bg-[#071011] text-white px-5 lg:px-0">
      <Container>
        {/* logo and links */}
        <div className="grid grid-cols-1 lg:grid-cols-4 pb-14 pt-20 gap-3">
          <MainLink
            href="/"
            locale={language}
            className="flex justify-center md:justify-start max-md:items-center "
          >
            <Image
              className="w-[160px] h-[54px]"
              src={logoServer}
              width={200}
              height={54}
              alt="logo"
            />
            {/* <Image src="logo.svg" width={100} height={100} alt="logo" /> */}
          </MainLink>

          <div>
            <h3 className="mb-2">{t("usefullinks")}</h3>
            <div className="flex flex-col ">
              <MainLink
                className="my-2 lg:my-4 block text-white/70  hover:!text-primary duration-500"
                locale={language}
                href={`/about-us`}
              >
                {t("about_us")}
              </MainLink>
              <MainLink
                className="my-2 lg:my-4 block text-white/70  hover:!text-primary duration-500"
                locale={language}
                href={`/blogs`}
              >
                {t("blogs")}
              </MainLink>
              <MainLink
                className="my-2 lg:my-4 block text-white/70  hover:!text-primary duration-500"
                locale={language}
                href={`property-filter/properites`}
              >
                {t("properties")}
              </MainLink>
            </div>
          </div>
          {/* <div>
            <h3 className="mb-2">{t("otherlinks")}</h3>
            <div className="flex flex-col ">
              <MainLink
                className="my-2 lg:my-5 block text-white/70  hover:!text-primary duration-500"
                locale={language}
                href={`developers`}
              >
                {t("developers")}
              </MainLink>
              <MainLink
                className="my-2 lg:my-5 block text-white/70  hover:!text-primary duration-500"
                locale={language}
                href={`blogs`}
              >
                {t("blogs")}
              </MainLink>
            </div>
          </div> */}
          <div>
            <h3 className="mb-2">{t("contacts")}</h3>
            <div className="flex flex-col ">
              <Link
                className="my-2 lg:my-4 text-white/70  hover:!text-primary duration-500 flex items-center gap-2"
                locale={language}
                href={`tel:${data?.data?.contacts?.phone}`}
                target="_blank"
              >
                <Image
                  className="w-[24px] h-[24px]"
                  src={landlinewhite}
                  width={200}
                  height={54}
                  alt="logo"
                />
                {/* <Icon
                  className="text-2xl text-white/50"
                  icon="tabler:device-landline-phone"
                /> */}
                {data?.data?.contacts?.phone}
              </Link>
              <Link
                className="my-2 lg:my-4 text-white/70  hover:!text-primary duration-500 flex items-center gap-2"
                locale={language}
                href={`https://wa.me/${data?.data?.contacts?.whatsapp}`}
                target="_blank"
              >
                <Icon
                  className="text-2xl text-white/50"
                  icon="ic:outline-whatsapp"
                />
                {data?.data?.contacts?.whatsapp}
              </Link>
              <Link
                className="my-2 lg:my-4 text-white/70  hover:!text-primary duration-500 flex items-center gap-2"
                locale={language}
                href={`mailto:${data?.data?.contacts?.email}`}
                target="_blank"
              >
                <Icon className="text-2xl text-white/50" icon="iconoir:mail" />
                {data?.data?.contacts?.email}
              </Link>
            </div>
          </div>

          <div>
            <h3 className="mb-2">{t("address")}</h3>
            <div className="">
              <div className="text-white/70 flex flex-col">
                <p className="my-2 lg:my-4"> Office 2015 - B2B Tower</p>
                <p className="my-2 lg:my-4"> Marasi Dr, Business Bay</p>
                <p className="my-2 lg:my-4">Dubai (UAE)</p>
              </div>
            </div>
          </div>
        </div>

        {/* copyright */}
        <div className="border-t border-gray-600 flex flex-col-reverse md:flex-row items-center justify-between gap-y-5 py-5 ">
          <div className="flex gap-5">
            <Link
              target="_blank"
              className="hover:!text-primary duration-500"
              href={data?.data?.social.x}
            >
              <Icon icon="fa6-brands:twitter" />
            </Link>
            <Link
              target="_blank"
              className="hover:!text-primary duration-500"
              href={data?.data?.social?.linkedin}
            >
              <Icon icon="fa6-brands:linkedin-in" />
            </Link>
            <Link
              target="_blank"
              className="hover:!text-primary duration-500"
              href={data?.data?.social.facebook}
            >
              <Icon icon="fa6-brands:facebook-f" />
            </Link>

            <Link
              target="_blank"
              className="hover:!text-primary duration-500"
              href={data?.data?.social?.tiktok}
            >
              <Icon icon="simple-icons:tiktok" />
            </Link>
            

            <Link
              target="_blank"
              className="hover:!text-primary duration-500"
              href={data?.data?.social?.instagram}
            >
              <Icon icon="line-md:instagram" />
            </Link>
          </div>
          <div className="flex items-center justify-center gap-10">
          
          <div className="text-center py-5 hidden xl:block">{t("copy")}</div>
            <MainLink
              className="!text-white/70  hover:!text-primary duration-500"
              locale={language}
              href="/faqs"
            >
              {t("faqs")}
            </MainLink>
            <MainLink
              className="!text-white/70  hover:!text-primary duration-500"
              locale={language}
              href="/privacy"
            >
              {t("privacypolicy")}
            </MainLink>
            <MainLink
              className="!text-white/70  hover:!text-primary duration-500"
              locale={language}
              href="/terms"
            >
              {t("terms&conditions")}
            </MainLink>
          </div>
        </div>
        <div className="text-center py-5 xl:hidden">{t("copy")}</div>
      </Container>
    </footer>
  );
};

export default Footer;