import { forwardRef } from "react";

export const InfoIcon = forwardRef<SVGSVGElement, { className?: string }>(
  ({ className }, ref) => {
    return (
      <svg
        ref={ref}
        width="16"
        height="16"
        viewBox="0 0 16 16"
        xmlns="http://www.w3.org/2000/svg"
        className={`${className}`}
      >
        <path
          d="M7.4 11H8.6V7.4H7.4V11ZM8 6.2C8.17 6.2 8.3125 6.1425 8.4275 6.0275C8.5425 5.9125 8.6 5.77 8.6 5.6C8.6 5.43 8.5425 5.2875 8.4275 5.1725C8.3125 5.0575 8.17 5 8 5C7.83 5 7.6875 5.0575 7.5725 5.1725C7.4575 5.2875 7.4 5.43 7.4 5.6C7.4 5.77 7.4575 5.9125 7.5725 6.0275C7.6875 6.1425 7.83 6.2 8 6.2ZM8 14C7.17 14 6.39 13.8425 5.66 13.5275C4.93 13.2125 4.295 12.785 3.755 12.245C3.215 11.705 2.7875 11.07 2.4725 10.34C2.1575 9.61 2 8.83 2 8C2 7.17 2.1575 6.39 2.4725 5.66C2.7875 4.93 3.215 4.295 3.755 3.755C4.295 3.215 4.93 2.7875 5.66 2.4725C6.39 2.1575 7.17 2 8 2C8.83 2 9.61 2.1575 10.34 2.4725C11.07 2.7875 11.705 3.215 12.245 3.755C12.785 4.295 13.2125 4.93 13.5275 5.66C13.8425 6.39 14 7.17 14 8C14 8.83 13.8425 9.61 13.5275 10.34C13.2125 11.07 12.785 11.705 12.245 12.245C11.705 12.785 11.07 13.2125 10.34 13.5275C9.61 13.8425 8.83 14 8 14Z"
          fill="var(--swapper-text-color)"
        />
      </svg>
    );
  },
);