import { iconVariants } from "./variants"

import type { IconProps } from "@/types/components/icon"

export default function MapIcon({ className, color, ...props }: IconProps) {
  const classNames = iconVariants({ className, color })
  return (
    <svg
      className={classNames}
      xmlns="http://www.w3.org/2000/svg"
      width="25"
      height="25"
      viewBox="0 0 25 25"
      fill="none"
      {...props}
    >
      <mask
        id="mask0_4031_935"
        style={{ maskType: "alpha" }}
        maskUnits="userSpaceOnUse"
        x="0"
        y="0"
        width="25"
        height="25"
      >
        <rect x="0.5" y="0.194336" width="24" height="24" fill="#D9D9D9" />
      </mask>
      <g mask="url(#mask0_4031_935)">
        <path
          d="M15.5 21.1943L9.5 19.0943L4.85 20.8943C4.51667 21.0277 4.20833 20.9902 3.925 20.7818C3.64167 20.5735 3.5 20.2943 3.5 19.9443V5.94434C3.5 5.72767 3.5625 5.536 3.6875 5.36934C3.8125 5.20267 3.98333 5.07767 4.2 4.99434L9.5 3.19434L15.5 5.29434L20.15 3.49434C20.4833 3.361 20.7917 3.3985 21.075 3.60684C21.3583 3.81517 21.5 4.09434 21.5 4.44434V18.4443C21.5 18.661 21.4375 18.8527 21.3125 19.0193C21.1875 19.186 21.0167 19.311 20.8 19.3943L15.5 21.1943ZM14.5 18.7443V7.04434L10.5 5.64434V17.3443L14.5 18.7443ZM16.5 18.7443L19.5 17.7443V5.89434L16.5 7.04434V18.7443ZM5.5 18.4943L8.5 17.3443V5.64434L5.5 6.64434V18.4943Z"
          fill="white"
        />
      </g>
    </svg>
  )
}
