export interface CredentialCheckProps {
  borderColor?: string;
  checkColor?: string;
  size?: string;
}

export const CredentialCheck: React.FunctionComponent<CredentialCheckProps> = (props) => {
  return (
    <svg
      width={props.size || "20"}
      height={props.size || "20"}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M8.81215 1.57442C9.57272 1.25938 10.4273 1.25938 11.1878 1.57442L15.1179 3.20228C15.8784 3.51731 16.4827 4.12158 16.7977 4.88215L18.4256 8.81215C18.7406 9.57272 18.7406 10.4273 18.4256 11.1878L16.7977 15.1179C16.4827 15.8784 15.8784 16.4827 15.1179 16.7977L11.1878 18.4256C10.4273 18.7406 9.57272 18.7406 8.81215 18.4256L4.88215 16.7977C4.12158 16.4827 3.51731 15.8784 3.20228 15.1179L1.57442 11.1878C1.25938 10.4273 1.25938 9.57272 1.57442 8.81215L3.20228 4.88215C3.51731 4.12158 4.12158 3.51731 4.88215 3.20228L8.81215 1.57442Z"
        stroke={props.borderColor || "#93DFC0"}
        strokeWidth="2"
      />
      <path
        d="M6.96786 9.42406L8.68129 11.1609L13.0308 6.71786C13.2844 6.49899 13.6096 6.38598 13.9413 6.40142C14.273 6.41686 14.5867 6.55961 14.8199 6.80114C15.053 7.04267 15.1883 7.36518 15.1987 7.70419C15.2091 8.04319 15.0938 8.37373 14.876 8.6297L9.60391 14.0152C9.35753 14.2618 9.02629 14.4 8.68129 14.4C8.3363 14.4 8.00505 14.2618 7.75868 14.0152L5.12263 11.3224C4.90479 11.0665 4.78956 10.7359 4.79996 10.3969C4.81037 10.0579 4.94566 9.7354 5.17877 9.49387C5.41189 9.25234 5.72565 9.10959 6.05734 9.09415C6.38904 9.07871 6.71421 9.19172 6.96786 9.41059V9.42406Z"
        fill={props.checkColor || "#28C081"}
      />
    </svg>
  );
};