import React from 'react';
import { Path, Svg } from 'react-native-svg';
import { View } from 'react-native';
import type { ViewStyle } from 'react-native';

import { safeWithTheme } from '../../branding';
import type { ThemeProps } from '../../branding/hoc/types';

interface HelpIconProps {
    style?: ViewStyle;
    testID?: string;
}

export const HelpIcon = ({
    style,
    testID = 'helpIcon',
    colors
}: HelpIconProps & ThemeProps) => (
    <View style={style} testID={testID}>
        <Svg width={24} height={24} viewBox="0 0 24 24" fill="none">
            <Path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M1 11.5C1 17.299 5.70101 22 11.5 22C17.299 22 22 17.299 22 11.5C22 5.70101 17.299 1 11.5 1C5.70101 1 1 5.70101 1 11.5ZM21 11.5C21 16.7467 16.7467 21 11.5 21C6.25329 21 2 16.7467 2 11.5C2 6.25329 6.25329 2 11.5 2C16.7467 2 21 6.25329 21 11.5ZM11 15V12.5H11.5C12.8807 12.5 14 11.3807 14 10C14 8.61929 12.8807 7.5 11.5 7.5C10.1193 7.5 9 8.61929 9 10H8C8 8.067 9.567 6.5 11.5 6.5C13.433 6.5 15 8.067 15 10C15 11.7632 13.6961 13.2219 12 13.4646V15H11ZM12 17V16H11V17H12Z"
                fill={colors.gray0}
            />
        </Svg>
    </View>
);

export default safeWithTheme(HelpIcon);