import { forwardRef } from "react";
import type { IconProps } from "../../types";

export const IconQuestionMarkCircleOutline = forwardRef<
  SVGSVGElement,
  IconProps
>(({ color = "currentColor", ...props }, forwardedRef) => {
  const { className } = props;
  props = {
    ...props,
    width: `${props.width || props.size || 20}`,
    height: `${props.height || props.size || 20}`,
    className: `${
      className ? className + " " : ""
    }customeow-icon customeow-icon-icon-question-mark-circle-outline`,
  };
  return (
    <svg
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
      ref={forwardedRef}
    >
      <path
        d="M10 3.5C6.34865 3.5 3.5 6.56367 3.5 10C3.5 13.4363 6.28799 16.5 10 16.5C13.712 16.5 16.5 13.5273 16.5 10C16.5 6.47269 13.6514 3.5 10 3.5ZM2 10C2 5.44156 5.77243 2 10 2C14.2276 2 18 5.41123 18 10C18 14.5888 14.3186 18 10 18C5.68144 18 2 14.5584 2 10ZM11.2741 7.16166C10.5805 6.55481 9.41984 6.55481 8.7263 7.16166C8.41457 7.43442 7.94075 7.40283 7.66799 7.0911C7.39523 6.77938 7.42682 6.30555 7.73854 6.03279C8.99762 4.9311 11.0028 4.9311 12.2618 6.03279C13.5796 7.18587 13.5796 9.10217 12.2618 10.2552C12.0392 10.4501 11.7941 10.6095 11.5362 10.7343C10.9842 11.0015 10.7502 11.3418 10.7502 11.5815V12.0099C10.7502 12.4242 10.4144 12.7599 10.0002 12.7599C9.58598 12.7599 9.25019 12.4242 9.25019 12.0099V11.5815C9.25019 10.4406 10.1919 9.71847 10.8827 9.38414C11.0253 9.31514 11.1569 9.22892 11.2741 9.12638C11.9089 8.57092 11.9089 7.71712 11.2741 7.16166ZM9.25 14.2155C9.25 13.8013 9.58579 13.4655 10 13.4655H10.0063C10.4205 13.4655 10.7563 13.8013 10.7563 14.2155V14.2217C10.7563 14.6359 10.4205 14.9717 10.0063 14.9717H10C9.58579 14.9717 9.25 14.6359 9.25 14.2217V14.2155Z"
        fill={color}
        fillRule="evenodd"
        clipRule="evenodd"
      />
    </svg>
  );
});

IconQuestionMarkCircleOutline.displayName = "IconQuestionMarkCircleOutline";

export default IconQuestionMarkCircleOutline;