import { iconVariants } from "./variants"

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

export default function PhoneIcon({
  className,
  color,
  height = "24",
  width = "24",
  ...props
}: IconProps) {
  const classNames = iconVariants({ className, color })
  return (
    <svg
      className={classNames}
      fill="none"
      height={height}
      viewBox="0 0 24 24"
      width={width}
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <mask
        height="24"
        id="mask0_4077_9677"
        maskUnits="userSpaceOnUse"
        style={{ maskType: "alpha" }}
        width="24"
        x="0"
        y="0"
      >
        <rect width="24" height="24" fill="#D9D9D9" />
      </mask>
      <g mask="url(#mask0_4077_9677)">
        <path
          d="M19.725 20.75C17.725 20.75 15.7375 20.3063 13.7625 19.4188C11.7875 18.5313 9.9875 17.2708 8.3625 15.6375C6.72917 14.0125 5.46875 12.2125 4.58125 10.2375C3.69375 8.2625 3.25 6.2734 3.25 4.2702C3.25 3.98173 3.34762 3.73958 3.54285 3.54375C3.7381 3.34792 3.98215 3.25 4.275 3.25H8.15C8.38333 3.25 8.58542 3.32292 8.75625 3.46875C8.92708 3.61458 9.03333 3.8 9.075 4.025L9.725 7.425C9.75833 7.65 9.74792 7.85208 9.69375 8.03125C9.63958 8.21042 9.55 8.36667 9.425 8.5L7.0625 10.9C7.40417 11.5167 7.79766 12.1082 8.24297 12.6747C8.68829 13.2412 9.17813 13.7871 9.7125 14.3125C10.2125 14.8125 10.7438 15.2833 11.3063 15.725C11.8688 16.1667 12.4667 16.575 13.1 16.95L15.475 14.6C15.6167 14.4583 15.7833 14.3583 15.975 14.3C16.1667 14.2417 16.3667 14.225 16.575 14.25L19.95 14.925C20.1833 14.9833 20.375 15.1013 20.525 15.2788C20.675 15.4564 20.75 15.6552 20.75 15.875V19.725C20.75 20.0179 20.6524 20.2619 20.4572 20.4572C20.2619 20.6524 20.0179 20.75 19.725 20.75ZM6.1625 9.125L7.8125 7.475L7.375 5.125H5.1625C5.22917 5.79167 5.34167 6.4625 5.5 7.1375C5.65833 7.8125 5.87917 8.475 6.1625 9.125ZM14.8625 17.825C15.5042 18.1083 16.1625 18.3333 16.8375 18.5C17.5125 18.6667 18.1917 18.775 18.875 18.825V16.625L16.575 16.1375L14.8625 17.825Z"
          fill="#4D001B"
        />
      </g>
    </svg>
  )
}
