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 AccountIconProps = ComponentProps<typeof StyledSvg>;

export const AccountIcon = (props: AccountIconProps) => (
  <StyledSvg
    viewBox="0 0 20 20"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    {...props}
  >
    <path
      d="M10 10.8333C12.3012 10.8333 14.1667 8.96785 14.1667 6.66667C14.1667 4.36548 12.3012 2.5 10 2.5C7.69885 2.5 5.83337 4.36548 5.83337 6.66667C5.83337 8.96785 7.69885 10.8333 10 10.8333ZM10 10.8333C11.7682 10.8333 13.4638 11.5357 14.7141 12.786C15.9643 14.0362 16.6667 15.7319 16.6667 17.5M10 10.8333C8.23193 10.8333 6.53624 11.5357 5.286 12.786C4.03575 14.0362 3.33337 15.7319 3.33337 17.5"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </StyledSvg>
);