import { useState } from "react";

import RoutingWhiteC from "@/components/icons/RoutingWhiteC";
import { Button } from "@mui/material";
import Detail from "./Detail";
import RoutingC from "@/components/icons/RoutingC";
import ModalOpenLocation from "@/app/component/openLocation";
import CustomLoading from "@/app/component/loading/Custom";

function Contact({ data }) {
  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    <div
      className=" opacity-page border border-[#EFEFEF] rounded-[16px] py-[12px] sm:py-[18px] md:py-[25px] lg:py-[32px] px-[12px] sm:px-[30px] md:px-[47px] lg:px-[64px] "
    >
      <div className="flex items-end justify-between">
        <Detail data={data} />
        <ModalOpenLocation
          data={data}
          open={open}
          setOpen={setOpen}
          handleClose={handleClose}
        >
          <Button
            className="!hidden md:!flex !gap-[8px] !py-[8px] !px-[12px]"
            onClick={handleOpen}
            variant="outlined"
          >
            <RoutingC />
            مسیریابی
          </Button>
        </ModalOpenLocation>
      </div>
      <div className="w-full relative h-[460px] mt-[24px]">
        <CustomLoading width="full" height={400}>
          <iframe
            src={`https://maps.google.com/maps?q=${
              data?.map?.latitude && data?.map?.longitude
                ? `${data.map.latitude},${data.map.longitude}`
                : encodeURIComponent(data?.location || data?.title || "")
            }&z=14&output=embed`}
            className="w-full h-full rounded-lg"
            loading="lazy"
          ></iframe>
          <ModalOpenLocation
            data={data}
            open={open}
            setOpen={setOpen}
            handleClose={handleClose}
          >
            <Button
              className="!flex md:!hidden !text-[#FAFAFA] !gap-[8px] !p-2 !absolute !left-3 !bottom-3 !rounded-[4px] !border !border-[#5559CE] !bg-[#5559CE] !shadow-[0px_1px_24px_0px_rgba(69,_69,_69,_0.54)]"
              onClick={handleOpen}
            >
              <RoutingWhiteC />
              مسیریابی
            </Button>
          </ModalOpenLocation>
        </CustomLoading>
      </div>
    </div>
  );
}

export default Contact;
