import Modal from "@/components/elements/Modal";
import RoundedDiv from "@/components/elements/RoundedDiv";
import { IContactInfo } from "@/types/types";
import Image from "next/image";
import React from "react";

interface IBillboardModalProps {
  showContactInfoModal: boolean;
  setShowContactInfoModal: (e: boolean) => void;
  contactInfo: IContactInfo;
}

const BillboardContactInfoModal: React.FC<IBillboardModalProps> = ({
  showContactInfoModal,
  setShowContactInfoModal,
  contactInfo,
}) => {
  const contactMethods = [
    { key: "mobile", icon: "mobile.svg", link: `tel:${contactInfo?.mobile}` },
    { key: "phone", icon: "phone.svg", link: `tel:${contactInfo?.phone}` },
    {
      key: "whatsappNumber",
      icon: "whatsapp.svg",
      link: `https://wa.me/${contactInfo?.whatsappNumber}`,
    },
    {
      key: "telegramLink",
      icon: "telegram.svg",
      link: `https://t.me/${contactInfo?.telegramLink}`,
    },
    {
      key: "instagramLink",
      icon: "instagram.svg",
      link: `https://instagram.com/${contactInfo?.instagramLink}`,
    },
  ];

  return (
    <Modal
      isOpen={showContactInfoModal}
      onClose={() => setShowContactInfoModal(false)}
      height="430px"
    >
      <div className="flex flex-col items-center mx-auto pb-14 max-w-sm">
        <span className="font-bold text-lg my-2">اطلاعات تماس</span>
        <div className="flex flex-wrap justify-center w-full gap-4 mt-5">
          {contactMethods.map(
            ({ key, icon, link }) =>
              contactInfo?.[key as keyof IContactInfo] && (
                <a
                  key={key}
                  href={link}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-full flex justify-center items-center"
                >
                  <RoundedDiv className="h-9 gap-2 w-full">
                    <span>
                      {contactInfo[key as keyof IContactInfo]}
                    </span>
                    <Image
                      width={24}
                      height={24}
                      alt={icon}
                      src={`/images/icons/${icon}`}
                      className="dark:invert"
                    />
                  </RoundedDiv>
                </a>
              )
          )}
        </div>
      </div>
    </Modal>
  );
};

export default BillboardContactInfoModal;
