import React from "react";

import type { Props } from "./types";

export const WaterDropIcon: React.FC<Props> = ({
  width = "24",
  height = "24",
  className,
  color = "var(--color-neutral-110)",
}) => (
  <svg
    width={width}
    height={height}
    className={className}
    viewBox="0 0 14 18"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M7.00016 17.334C5.23627 17.334 3.68419 16.7194 2.34391 15.4902C1.00363 14.2611 0.333496 12.5979 0.333496 10.5007C0.333496 9.16732 0.843913 7.7194 1.86475 6.1569C2.88558 4.5944 4.43766 2.90343 6.521 1.08398C6.59044 1.02843 6.66683 0.98329 6.75016 0.948568C6.8335 0.913845 6.91683 0.896484 7.00016 0.896484C7.0835 0.896484 7.16683 0.913845 7.25016 0.948568C7.3335 0.98329 7.40988 1.02843 7.47933 1.08398C9.56266 2.90343 11.1147 4.5944 12.1356 6.1569C13.1564 7.7194 13.6668 9.16732 13.6668 10.5007C13.6668 12.5979 12.9967 14.2611 11.6564 15.4902C10.3161 16.7194 8.76405 17.334 7.00016 17.334ZM7.00016 16.084C8.52794 16.084 9.81266 15.5562 10.8543 14.5007C11.896 13.4451 12.4168 12.1118 12.4168 10.5007C12.4168 9.40343 11.955 8.1569 11.0314 6.76107C10.1078 5.36523 8.76405 3.88954 7.00016 2.33398C5.23627 3.88954 3.89252 5.36523 2.96891 6.76107C2.0453 8.1569 1.5835 9.40343 1.5835 10.5007C1.5835 12.1118 2.10433 13.4451 3.146 14.5007C4.18766 15.5562 5.47238 16.084 7.00016 16.084ZM6.97933 14.6673C7.20155 14.6673 7.37169 14.6291 7.48975 14.5527C7.6078 14.4763 7.66683 14.3618 7.66683 14.209C7.66683 14.0562 7.6078 13.9382 7.48975 13.8548C7.37169 13.7715 7.19461 13.7298 6.9585 13.7298C6.37516 13.7298 5.78141 13.5458 5.17725 13.1777C4.57308 12.8097 4.18766 12.1604 4.021 11.2298C3.99322 11.1048 3.93072 11.0041 3.8335 10.9277C3.73627 10.8513 3.63211 10.8132 3.521 10.8132C3.36822 10.8132 3.25016 10.8722 3.16683 10.9902C3.0835 11.1083 3.05572 11.2298 3.0835 11.3548C3.29183 12.5215 3.78488 13.3652 4.56266 13.8861C5.34044 14.4069 6.146 14.6673 6.97933 14.6673Z"
      fill={color}
    />
  </svg>
);