import React from "react";
import { IconButton, SvgIcon } from "@mui/material";
import { Link } from "react-router-dom";
import styles from "./MapButtons.module.css";

const MapButtons = () => {
  return (
    <div className={styles["content-wrapper"]}>
      <div className={styles["title-wrapper"]}>
        <img
          className={styles["detective-dog"]}
          src="./Imgs/detective_dog.svg"
          alt="deco"
        ></img>
        <div className={styles["content"]}>
          <div className={styles["title"]}>有狗狗貓貓走失咗? 搵禾哋報料 ⬇️</div>
          <div className={styles["button-container"]}>
            <Link
              to={
                "https://docs.google.com/forms/d/e/1FAIpQLScomQJmP_29GITVpcB5ipMJGoQhDMGBElZc-WtsRhrLRC2tbw/viewform?usp=sharing"
              }
              target="_blank"
              rel="noopener noreferrer"
              style={{ textDecoration: "none" }}
            >
              <IconButton id={styles["found-pet"]}>
                <SvgIcon
                  id={styles["icon"]}
                  height="512pt"
                  viewBox="0 0 512 512.00042"
                  width="512pt"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m190.691406 375.855469v-7.390625c0-16.484375 6.679688-32.613282 18.328125-44.257813l24.347657-24.332031-21.242188-21.242188-24.332031 24.347657c-11.644531 11.648437-27.773438 18.328125-44.257813 18.328125h-7.390625c-33.59375 0-54.046875 20.316406-54.617187 20.941406l-64.910156 67.238281c-23.386719 24.070313-21.3125 61.855469 1.355468 84.539063 22.683594 22.667968 60.46875 24.742187 84.535156 1.355468l67.242188-64.910156c.625-.570312 20.941406-21.027344 20.941406-54.617187zm0 0"
                    fill="#3dc6ff"
                  />
                  <path
                    d="m336.332031 351.332031c-96.863281 0-175.664062-78.804687-175.664062-175.664062 0-96.863281 78.800781-175.667969 175.664062-175.667969s175.667969 78.804688 175.667969 175.667969c0 96.859375-78.804688 175.664062-175.667969 175.664062zm0 0"
                    fill="#8bddff"
                  />
                  <path
                    d="m336.332031 30c-80.320312 0-145.664062 65.347656-145.664062 145.667969 0 80.320312 65.34375 145.664062 145.664062 145.664062 80.320313 0 145.667969-65.34375 145.667969-145.664062 0-80.320313-65.347656-145.667969-145.667969-145.667969zm0 0"
                    fill="#f3eee9"
                  />
                  <g fill-rule="evenodd">
                    <path
                      d="m304.199219 96.402344c8.28125 0 15 6.71875 15 15 0 8.273437-6.71875 15-15 15s-15-6.726563-15-15c0-8.28125 6.71875-15 15-15zm0 0"
                      fill="#db8a53"
                    />
                    <path
                      d="m256 136.570312c8.28125 0 15 6.71875 15 15 0 8.273438-6.71875 15-15 15s-15-6.726562-15-15c0-8.28125 6.71875-15 15-15zm0 0"
                      fill="#db8a53"
                    />
                    <path
                      d="m416.664062 136.570312c8.28125 0 15 6.71875 15 15 0 8.273438-6.71875 15-15 15-8.277343 0-15-6.726562-15-15 0-8.28125 6.722657-15 15-15zm0 0"
                      fill="#db8a53"
                    />
                    <path
                      d="m368.464844 96.402344c8.28125 0 15 6.71875 15 15 0 8.273437-6.71875 15-15 15-8.277344 0-15-6.726563-15-15 0-8.28125 6.722656-15 15-15zm0 0"
                      fill="#db8a53"
                    />
                  </g>
                  <path
                    d="m352.398438 254.9375h-32.132813c-26.449219 0-47.132813-21.554688-47.132813-47.132812 0-34.851563 28.351563-63.203126 63.199219-63.203126 34.847657 0 63.199219 28.351563 63.199219 63.203126 0 25.597656-20.695312 47.132812-47.132812 47.132812zm0 0"
                    fill="#db8a53"
                  />
                </SvgIcon>
                發現疑似走失寵物
              </IconButton>
            </Link>
            <Link
              to={
                "https://docs.google.com/forms/d/e/1FAIpQLScu0EI6U7zWtdvCJNvBkK5Fy1hF3S6RO7fNGEB0-b9pxUUhkg/viewform?usp=sharing"
              }
              target="_blank"
              rel="noopener noreferrer"
              style={{ textDecoration: "none" }}
            >
              <IconButton id={styles["lost-pet"]}>
                <SvgIcon
                  id={styles["icon"]}
                  xmlns="http://www.w3.org/2000/svg"
                  x="0px"
                  y="0px"
                  viewBox="0 0 512 512"
                >
                  <style type="text/css"></style>

                  <g>
                    <path
                      class="st0"
                      d="M289.4,197.1h32.6v124h-32.6V197.1z"
                      fill="#7A6D79"
                    />
                    <path
                      class="st1"
                      d="M179.1,217V17.5c0-5.5,4.5-10,10-10h233.1c5.5,0,10,4.5,10,10V217c0,5.5-4.5,10-10,10H189.1
		C183.6,227,179.1,222.5,179.1,217z"
                      fill="#EFEDEF"
                    />
                    <g>
                      <ellipse
                        class="st2"
                        cx="305.6"
                        cy="66.7"
                        rx="14.6"
                        ry="14.6"
                      />
                      <ellipse
                        class="st2"
                        cx="356.9"
                        cy="90.5"
                        rx="14.6"
                        ry="14.6"
                      />
                      <ellipse
                        class="st2"
                        cx="254.3"
                        cy="90.5"
                        rx="14.6"
                        ry="14.6"
                      />
                      <path
                        class="st2"
                        d="M338.9,135.2c-3-1.1-5.4-3.5-6.9-6.4c-4.8-9.7-14.8-16.3-26.3-16.3s-21.5,6.6-26.3,16.3
			c-1.4,2.9-3.8,5.2-6.9,6.4c-8.8,3.3-15.1,11.8-15.1,21.8c0,12.8,10.4,23.3,23.3,23.3h50.2c12.8,0,23.3-10.4,23.3-23.3
			C354,147,347.7,138.5,338.9,135.2L338.9,135.2z"
                        fill="#E19974"
                      />
                    </g>
                    <path
                      class="st3"
                      d="M350.2,342.1c2.4-2.6,3.8-6.1,3.8-10c0-3.8-1.4-7.3-3.8-10c-1.7-1.9-1.6-4.7,0.1-6.7c2.4-2.8,3.8-6.4,3.7-10.4
		c-0.3-8.1-7.3-14.4-15.4-14.4h-49.2v-30.4h-13.9c-12.1,0-22.9,7.8-26.7,19.3l-7.9,24.2c-1.8,5.6-5.2,10.5-9.7,14.3l-92.5,77.6
		l47.5,56.7l58-48.6c2.9-2.4,6.5-3.7,10.2-3.7h76.1c8.1,0,15.2-6.6,15.4-14.7c0-2.5-0.5-4.9-1.6-7c-1.2-2.4-0.3-5.3,2.1-6.7
		c4.6-2.6,7.7-7.4,7.7-13.1c0-3.8-1.4-7.3-3.8-10C348.5,346.8,348.5,344,350.2,342.1L350.2,342.1z"
                      fill="#FFCEBF"
                    />
                    <path
                      class="st4"
                      d="M79.9,431.7l76-63.8l61.1,72.8l-76,63.8L79.9,431.7z"
                      fill="#5F99D7"
                    />
                    <path
                      class="st5"
                      d="M166,353.5l66.9,79.7c3.6,4.3,3,10.6-1.2,14.2l-10.7,9c-4.3,3.6-10.6,3-14.2-1.2l-66.9-79.7
		c-3.6-4.3-3-10.6,1.2-14.2l10.7-9C156,348.7,162.4,349.2,166,353.5z"
                      fill="#5DE1C4"
                    />
                  </g>
                </SvgIcon>
                主子唔見咗
              </IconButton>
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
};
export default MapButtons;