import React from "react";
import Modal from "../elements/Modal";
interface DirectionMapModalProps {
  showNavigationModal: boolean;
  setShowNavigationModal: (e: boolean) => void;
  correctedLat: number;
  correctedLng: number;
}
function DirectionMapModal({
  showNavigationModal,
  setShowNavigationModal,
  correctedLat,
  correctedLng,
}: DirectionMapModalProps) {
  const navigationLinks = [
    {
      name: "Google Maps",
      url: `https://www.google.com/maps/dir/?api=1&destination=${correctedLat},${correctedLng}`,
    },
    {
      name: "Waze",
      url: `https://waze.com/ul?ll=${correctedLat},${correctedLng}&navigate=yes`,
    },
    {
      name: "Apple Maps (آیفون)",
      url: `http://maps.apple.com/?daddr=${correctedLat},${correctedLng}`,
    },
    {
      name: "نشان",
      url: `nshn://navigate-to?lat=${correctedLat}&lng=${correctedLng}`,
    },
    {
      name: "بلد",
      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">
        انتخاب برنامه مسیریابی
      </h3>
      <div className="flex flex-col gap-3">
        {navigationLinks.map(({ name, url }) => (
          <a
            key={name}
            href={url}
            target="_blank"
            rel="noopener noreferrer"
            className=" rounded-3xl text-center border p-3"
          >
            {name}
          </a>
        ))}
      </div>
    </Modal>
  );
}

export default DirectionMapModal;
