import {StyleSheet, Text, View, Image} from 'react-native';
import React from 'react';
import {styles} from './styles';
import Icon from 'react-native-vector-icons/Ionicons';
import {globalStyles} from '../../../globalStyles';
import { getBranding } from '../../branding';
import {useMyStepsVerification} from '../../provider/verification.context';

const selfieGuide = '../../assets/SelfieGif.gif';

const SelfieGuide = () => {
  const { t, isRTL } = useMyStepsVerification();
  return (
    <>
      <View style={styles.container}>

      {getBranding().images?.selfie_guidance ? (
        <Image
        style={styles.image}
        resizeMode="contain"
          source={{uri: getBranding().images?.selfie_guidance}}
        />
      ) : (
        <Image      style={styles.image}
        resizeMode="contain" source={require(selfieGuide)} />
      )}


     
      </View>
      <View style={styles.infoContainer}>
        <Text style={[styles.infoHeading, globalStyles.textBold, {textAlign: isRTL ? 'right' : 'left'}]}>
          {t.bestScanResults}
        </Text>
        <View style={[styles.row, {flexDirection: isRTL ? 'row-reverse' : 'row'}]}>
          <Icon
            name="sunny"
            size={20}
            color={getBranding().colors.textDefault}
          />
          <Text style={[styles.infoSubHeading, globalStyles.textMedium, {textAlign: isRTL ? 'right' : 'left'}]}>
            {t.goodLighting}
          </Text>
        </View>
        <View style={[styles.row, {flexDirection: isRTL ? 'row-reverse' : 'row'}]}>
          <Icon name="eye" size={20} color={getBranding().colors.textDefault} />
          <Text style={[styles.infoSubHeading, globalStyles.textMedium, {textAlign: isRTL ? 'right' : 'left'}]}>
            {t.eyeLevel}
          </Text>
        </View>
      </View>
    </>
  );
};

export default SelfieGuide;