import React from 'react';
import { Path, Svg, Circle } from 'react-native-svg';
import { useTheme } from '../../../branding';

export interface Props {
    size: number;
}

export const WalkthroughUserIcon = ({ size }: Props) => {
    const { colors } = useTheme();
    return (
        <Svg width={size} height={size} viewBox="0 0 98 98" fill="none">
            <Circle
                opacity={0.25}
                cx={48.75}
                cy={35.25}
                r={12.75}
                stroke={colors.gray0}
                strokeWidth={3}
            />
            <Path
                opacity={0.25}
                clipRule="evenodd"
                d="M48.75 54c9.14 0 17.3 3.117 22.664 8-4.555 7.777-13 13-22.664 13-9.664 0-18.109-5.223-22.665-13 5.365-4.883 13.525-8 22.665-8z"
                stroke={colors.gray0}
                strokeWidth={3}
            />
        </Svg>
    );
};

export default WalkthroughUserIcon;