import Svg, { G, Path, Defs, ClipPath } from "react-native-svg";
import React from "react";
import { useValues } from "@src/utils/context/index";
import SvgComponentProps from "./type";

export function Location({ color, height = 18 }: SvgComponentProps) {
  const { iconColorStyle } = useValues();
  const strokeColor = color || iconColorStyle;

  return (
    <Svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} fill="none">
      <G clipPath="url(#a)">
        <Path
          fill={strokeColor}
          d="M17.183 7.041C16.308 3.191 12.95 1.458 10 1.458h-.008c-2.942 0-6.309 1.725-7.184 5.575-.975 4.3 1.659 7.942 4.042 10.233A4.53 4.53 0 0 0 10 18.541a4.496 4.496 0 0 0 3.142-1.275c2.383-2.291 5.016-5.925 4.041-10.225ZM10 11.216a2.625 2.625 0 1 1 0-5.249 2.625 2.625 0 0 1 0 5.25Z"
        />
      </G>
      <Defs>
        <ClipPath id="a">
          <Path fill="#fff" d="M0 0h20v20H0z" />
        </ClipPath>
      </Defs>
    </Svg>
  );
}
