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

const maps = [
  { src: "/assets/images/snapp.png", name: "snapp" },
  { src: "/assets/images/tapsi.png", name: "tapsi" },
  { src: "/assets/images/maps.png", name: "maps" },
  { src: "/assets/images/balad.png", name: "balad" },
  { src: "/assets/images/waze.png", name: "waze" },
];

function Content({ handleClose }) {
  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={handleClose}>
          <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 className="flex items-center flex-col justify-center gap-1">
            <Image
              className="w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]"
              src={item.src}
              alt="icon app"
              height={40}
              width={40}
            />
            <p className="text-[#3B3B3B] font-normal text-[14px]">
              {item.name}
            </p>
          </li>
        ))}
      </ul>
    </>
  );
}

export default Content;