import CloseModalD from "@/components/icons/CloseModalD";
import Image from "next/image";

function Content({ data, onClose }) {
  const { latitude, longitude } = data && data.map;

  const maps = [
    {
      src: "/assets/images/snapp.png",
      name: "snapp",
      url: `https://snapp.ir/route?lat=${latitude}&lng=${longitude}`,
    },
    {
      src: "/assets/images/tapsi.png",
      name: "tapsi",
      url: `https://tapsi.ir/route?lat=${latitude}&lng=${longitude}`,
    },
    {
      src: "/assets/images/maps.png",
      name: "maps",
      url: `https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}`,
    },
    {
      src: "/assets/images/balad.png",
      name: "balad",
      url: `https://balad.ir/map?lat=${latitude}&lng=${longitude}`,
    },
    {
      src: "/assets/images/waze.png",
      name: "waze",
      url: `https://waze.com/ul?ll=${latitude},${longitude}&navigate=yes`,
    },
  ];

  return (
    <>
      <div className="flex items-center justify-between">
        <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
          باز شدن با
        </p>
        <div className="cursor-pointer" onClick={onClose}>
          <CloseModalD />
        </div>
      </div>
      <span className="bg-[#EFEFEF] block h-px w-full mt-[12px] mb-[22px]"></span>
      <ul className="flex items-center justify-center gap-[32px] md:gap-[36px] lg:gap-[40px] mx-auto flex-wrap md:flex-nowrap md:mx-[72px]">
        {maps.map((item, idx) => (
          <li
            key={idx}
            className="flex items-center flex-col justify-center gap-1"
          >
            <a href={item.url} target="_blank" rel="noopener noreferrer">
              <Image
                className="
                  w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]
                  min-w-[32px] min-h-[32px] lg:min-w-[40px] lg:min-h-[40px]
                  max-w-[32px] max-h-[32px] lg:max-w-[40px] lg:max-h-[40px]
                "
                src={item.src}
                alt="icon app"
                height={40}
                width={40}
              />
              <p className="text-[#3B3B3B] text-center font-normal text-[14px]">
                {item.name}
              </p>
            </a>
          </li>
        ))}
      </ul>
    </>
  );
}

export default Content;