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

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

interface BackIconProps {
    color?: string;
    style?: ViewStyle;
    testID?: string;
}

export const BackIcon = ({
    color,
    style,
    testID = 'backIcon',
    colors
}: BackIconProps & ThemeProps) => {
    const iconColor = color || colors.gray0;
    return (
        <View style={style} testID={testID}>
            <Svg width={24} height={24} viewBox="0 0 24 24">
                <Path
                    d="M8.70712 12L16.3536 19.6465L15.6465 20.3536L7.29291 12L15.6465 3.64645L16.3536 4.35356L8.70712 12Z"
                    fill={iconColor}
                />
            </Svg>
        </View>
    );
};

export default safeWithTheme(BackIcon);