import { forwardRef } from "react";
import type { IconProps } from "../../types";

export const IconMapOutline = forwardRef<SVGSVGElement, IconProps>(
  ({ color = "currentColor", ...props }, forwardedRef) => {
    const { className } = props;
    props = {
      ...props,
      width: `${props.width || props.size || 20}`,
      height: `${props.height || props.size || 20}`,
      className: `${
        className ? className + " " : ""
      }customeow-icon customeow-icon-icon-map-outline`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M7.58385 3.38045C7.53107 3.35406 7.46893 3.35406 7.41615 3.38045L3.35365 5.4117C3.29013 5.44346 3.25 5.50839 3.25 5.57941V15.9831C3.25 16.1225 3.39668 16.2131 3.52135 16.1508L6.74533 14.5388C7.2204 14.3013 7.7796 14.3013 8.25467 14.5388L12.4161 16.6195C12.4689 16.6459 12.5311 16.6459 12.5839 16.6195L16.6464 14.5883C16.7099 14.5565 16.75 14.4916 16.75 14.4206V4.01691C16.75 3.87752 16.6033 3.78687 16.4786 3.8492L13.2547 5.46119C12.7796 5.69873 12.2204 5.69873 11.7453 5.46119L7.58385 3.38045ZM6.74533 2.03881C7.22041 1.80127 7.7796 1.80127 8.25467 2.03881L12.4161 4.11955C12.4689 4.14594 12.5311 4.14594 12.5839 4.11955L15.8078 2.50756C16.9298 1.94655 18.25 2.76245 18.25 4.01691V14.4206C18.25 15.0598 17.8889 15.6441 17.3172 15.9299L13.2547 17.9612C12.7796 18.1987 12.2204 18.1987 11.7453 17.9612L7.58385 15.8805C7.53107 15.8541 7.46893 15.8541 7.41615 15.8805L4.19217 17.4924C3.07015 18.0534 1.75 17.2376 1.75 15.9831V5.57941C1.75 4.94023 2.11113 4.35591 2.68283 4.07006L6.74533 2.03881ZM7.5 4.875C7.91421 4.875 8.25 5.21079 8.25 5.625V12.5C8.25 12.9142 7.91421 13.25 7.5 13.25C7.08579 13.25 6.75 12.9142 6.75 12.5V5.625C6.75 5.21079 7.08579 4.875 7.5 4.875ZM12.5 6.75C12.9142 6.75 13.25 7.08579 13.25 7.5V14.375C13.25 14.7892 12.9142 15.125 12.5 15.125C12.0858 15.125 11.75 14.7892 11.75 14.375V7.5C11.75 7.08579 12.0858 6.75 12.5 6.75Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
      </svg>
    );
  }
);

IconMapOutline.displayName = "IconMapOutline";

export default IconMapOutline;