"use client";

import Modal from "@/components/elements/Modal";
import RoundedDiv from "@/components/elements/RoundedDiv";
import Image from "next/image";
import React from "react";
import { useTranslation } from "react-i18next";

export type IShopContactInfo = {
  mobile?: string | null;
  landline?: string | null;
  telegram?: string | null;
  whatsapp?: string | null;
  instagram?: string | null;
};

interface IShopContactInfoModalProps {
  open: boolean;
  onClose: () => void;
  contactInfo: IShopContactInfo;
}

const ShopContactInfoModal: React.FC<IShopContactInfoModalProps> = ({
  open,
  onClose,
  contactInfo,
}) => {
  const { t } = useTranslation("common");
  const contactMethods = [
    { key: "mobile", icon: "mobile.svg", link: `tel:${contactInfo?.mobile}` },
    { key: "landline", icon: "phone.svg", link: `tel:${contactInfo?.landline}` },
    {
      key: "whatsapp",
      icon: "whatsapp.svg",
      link: `https://wa.me/${contactInfo?.whatsapp}`,
    },
    {
      key: "telegram",
      icon: "telegram.svg",
      link: `https://t.me/${contactInfo?.telegram}`,
    },
    {
      key: "instagram",
      icon: "instagram.svg",
      link: `https://instagram.com/${contactInfo?.instagram}`,
    },
  ];

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

export default ShopContactInfoModal;
