import { ark } from '@ark-ui/react/factory';
import type { ComponentProps } from 'react';
import { styled } from 'styled-system/jsx';

const StyledSvg = styled(ark.svg);

export type GoogleLoginIconProps = ComponentProps<typeof StyledSvg>;

export const GoogleLoginIcon = (props: GoogleLoginIconProps) => (
  <StyledSvg
    viewBox="0 0 20 20"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    aria-hidden="true"
    {...props}
  >
    <path
      d="M9.99905 6.01284C11.2196 6.01284 12.0429 6.54007 12.5124 6.98062L14.3468 5.18951C13.2202 4.14229 11.7541 3.49951 9.99905 3.49951C7.45683 3.49951 5.26127 4.9584 4.19238 7.08173L6.29405 8.71396C6.82127 7.14673 8.28016 6.01284 9.99905 6.01284Z"
      fill="#EA4335"
    />
    <path
      d="M16.2393 10.1443C16.2393 9.60987 16.1959 9.21987 16.102 8.81543H9.99927V11.2277H13.5815C13.5093 11.8271 13.1193 12.7299 12.2526 13.3365L14.3037 14.9254C15.5315 13.7915 16.2393 12.1232 16.2393 10.1443Z"
      fill="#4285F4"
    />
    <path
      d="M6.30125 11.2854C6.16402 10.8809 6.08458 10.4476 6.08458 9.99981C6.08458 9.55203 6.16402 9.1187 6.29402 8.71425L4.19236 7.08203C3.7518 7.96314 3.49902 8.95259 3.49902 9.99981C3.49902 11.047 3.7518 12.0365 4.19236 12.9176L6.30125 11.2854Z"
      fill="#FBBC05"
    />
    <path
      d="M9.99915 16.4996C11.7542 16.4996 13.2275 15.9218 14.3036 14.9252L12.2525 13.3363C11.7036 13.719 10.9669 13.9863 9.99915 13.9863C8.28026 13.9863 6.82137 12.8524 6.30137 11.2852L4.19971 12.9174C5.2686 15.0407 7.45693 16.4996 9.99915 16.4996Z"
      fill="#34A853"
    />
  </StyledSvg>
);
