"use client";
import call from "@/public/assets/icons/callus.svg";
import pin from "@/public/assets/icons/location2.svg";
import sms from "@/public/assets/icons/sms2.svg";
import whats from "@/public/assets/icons/whatsapp.svg";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { useState } from "react";
import defaultimg from "@/public/defaultimg.png";

type ContactCardsProps = {
  data: any;
};
const ContactCards = ({ data }: ContactCardsProps) => {
  const t = useTranslations("contactUs");
  const [changes, setChanges] = useState(false);
  const contactCardAddress = data?.data?.data?.address;
  const contactCardContacts = data?.data?.data?.contacts;

  const changesItem = () => {
    setChanges(!changes);
  };

  const phoneFormat = contactCardContacts?.phone?.match(/.{1,3}/g)?.join(" ");
  const whatsappFormat = contactCardContacts?.fax?.match(/.{1,3}/g)?.join(" ");

  const conCards = [
    {
      id: 1,
      img: pin,
      title: t("Visit Us"),
      text: contactCardAddress?.locales?.description,
    },
    {
      id: 2,
      img: call,
      title: t("Call Us"),
      text: "+ " + phoneFormat,
      dir: "ltr",
    },
    {
      id: 3,
      img: sms,
      title: t("Email Us"),
      text: contactCardContacts?.email,
    },
    {
      id: 4,
      img: whats,
      title: t("Whatsapp Us"),
      text: "+ " + whatsappFormat,
      dir: "ltr",
    },
  ];
  return (
    <div>
      <div className="grid grid-cols-1 md:grid-cols-2  lg:grid-cols-4 gap-6 pb-[100px]  ">
        {conCards.map((item) => (
          <div
            key={item.id}
            className=" flex justify-center lg:justify-start flex-col shadow-[0px_11px_31px_-2px_rgba(0,_0,_0,_0.1)]  h-[120px] p-3 gap-2 rounded-[10px]"
          >
            <div className="flex items-center gap-3">
              <div className="w-[56px] h-[56px] bg-lightPrimary2 flex items-center justify-center rounded-[8px] ">
                <Image
                  src={item.img || defaultimg}
                  alt="sms"
                  width={1000}
                  height={500}
                />
              </div>
              <div className="flex flex-col">
                <span className="text-dark text-[20px] font-normal">
                  {item.title}
                </span>
                <span className="block lg:hidden text-[16px] font-light text-dark">
                  {item.text}
                </span>
              </div>
            </div>
            <div className="flex">
              <span
                className="hidden lg:block text-[16px] font-light text-dark"
                dir={item.dir}
              >
                {item.text}
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ContactCards;