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, loading }) {
  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} loading={loading} />
        <ModalOpenLocation
          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} loading={loading}>
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d83998.96777841153!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e0!3m2!1sen!2snl!4v1723498499341!5m2!1sen!2snl"
            className="w-full h-full rounded-lg"
            loading="lazy"
          ></iframe>
          <ModalOpenLocation
            open={open}
            setOpen={setOpen}
            handleClose={handleClose}
          >
            <Button
              className="!flex md:!hidden !p-2 !absolute !left-3 !bottom-3 !rounded-full !border !border-[#5559CE] !bg-[#5559CE] !shadow-[0px_1px_24.8px_0px_rgba(69,_69,_69,_0.54)]"
              onClick={handleOpen}
            >
              <RoutingWhiteC />
            </Button>
          </ModalOpenLocation>
        </CustomLoading>
      </div>
    </div>
  );
}

export default Contact;
