"use client";

import React from "react";
import Modal from "../elements/Modal";
import { useTranslation } from "react-i18next";

interface DirectionMapModalProps {
  showNavigationModal: boolean;
  setShowNavigationModal: (e: boolean) => void;
  correctedLat: number;
  correctedLng: number;
}

function DirectionMapModal({
  showNavigationModal,
  setShowNavigationModal,
  correctedLat,
  correctedLng,
}: DirectionMapModalProps) {
  const { t } = useTranslation("common");

  const navigationLinks = [
    {
      labelKey: "navigation.googleMaps",
      url: `https://www.google.com/maps/dir/?api=1&destination=${correctedLat},${correctedLng}`,
    },
    {
      labelKey: "navigation.waze",
      url: `https://waze.com/ul?ll=${correctedLat},${correctedLng}&navigate=yes`,
    },
    {
      labelKey: "navigation.appleMaps",
      url: `http://maps.apple.com/?daddr=${correctedLat},${correctedLng}`,
    },
    {
      labelKey: "navigation.neshan",
      url: `nshn://navigate-to?lat=${correctedLat}&lng=${correctedLng}`,
    },
    {
      labelKey: "navigation.balad",
      url: `balad://route?destination=${correctedLat},${correctedLng}`,
    },
  ];

  return (
    <Modal
      isOpen={showNavigationModal}
      onClose={() => setShowNavigationModal(false)}
      height="440px"
    >
      <h3 className="text-lg font-bold text-center mb-4">{t("navigation.title")}</h3>
      <div className="flex flex-col gap-3">
        {navigationLinks.map(({ labelKey, url }) => (
          <a
            key={labelKey}
            href={url}
            target="_blank"
            rel="noopener noreferrer"
            className=" rounded-3xl text-center border p-3"
          >
            {t(labelKey)}
          </a>
        ))}
      </div>
    </Modal>
  );
}

export default DirectionMapModal;
