import { iconVariants } from "./variants"

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

export default function DirectionsIcon({
  className,
  color,
  width = "20",
  height = "20",
  ...props
}: IconProps) {
  const classNames = iconVariants({ className, color })
  return (
    <svg
      className={classNames}
      fill="none"
      height={height}
      viewBox="0 0 20 20"
      width={width}
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M8.28158 9.94792H11.3024V11.0104C11.3024 11.191 11.3823 11.3142 11.542 11.3802C11.7017 11.4462 11.8441 11.4167 11.9691 11.2917L13.542 9.70834C13.7017 9.54862 13.7816 9.36632 13.7816 9.16146C13.7816 8.9566 13.7017 8.77431 13.542 8.61459L11.9691 7.04167C11.8441 6.91667 11.7017 6.88542 11.542 6.94792C11.3823 7.01042 11.3024 7.13195 11.3024 7.31251V8.38542H7.50033C7.28505 8.38542 7.10102 8.46181 6.94824 8.61459C6.79546 8.76737 6.71908 8.95139 6.71908 9.16667V11.6667C6.71908 11.882 6.79546 12.066 6.94824 12.2188C7.10102 12.3715 7.28505 12.4479 7.50033 12.4479C7.7156 12.4479 7.89963 12.3715 8.05241 12.2188C8.20519 12.066 8.28158 11.882 8.28158 11.6667V9.94792ZM10.0003 18.1146C9.79894 18.1146 9.60623 18.0764 9.4222 18C9.23817 17.9236 9.0663 17.809 8.90658 17.6563L2.34408 11.0938C2.1913 10.934 2.07671 10.7622 2.00033 10.5781C1.92394 10.3941 1.88574 10.2014 1.88574 10C1.88574 9.79862 1.92394 9.60417 2.00033 9.41667C2.07671 9.22917 2.1913 9.05903 2.34408 8.90626L8.90658 2.34376C9.0663 2.18403 9.23817 2.06771 9.4222 1.9948C9.60623 1.92188 9.79894 1.88542 10.0003 1.88542C10.2017 1.88542 10.3962 1.92188 10.5837 1.9948C10.7712 2.06771 10.9413 2.18403 11.0941 2.34376L17.6566 8.90626C17.8163 9.05903 17.9326 9.22917 18.0055 9.41667C18.0785 9.60417 18.1149 9.79862 18.1149 10C18.1149 10.2014 18.0785 10.3941 18.0055 10.5781C17.9326 10.7622 17.8163 10.934 17.6566 11.0938L11.0941 17.6563C10.9413 17.809 10.7712 17.9236 10.5837 18C10.3962 18.0764 10.2017 18.1146 10.0003 18.1146ZM10.0003 16.5625L16.5628 10L10.0003 3.43751L3.43783 10L10.0003 16.5625Z"
        fill="#4D001B"
      />
    </svg>
  )
}
