import React, {Component} from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';

import HeaderBack from '../../components/Header/HeaderBack';

import I18n from '../../helper/i18/i18n';
import AppText from '../../components/AppText';
import {UPDATEOTP} from '../../routers/ScreenNames';
import R from '../../assets/R';
import Icon from 'react-native-vector-icons/AntDesign';
import {HEIGHTXD, WIDTHXD} from '../../Config/Functions';

const DATA = [
  {
    id: '1',
    title: 'ChangeSmartOTP',
    Screen: UPDATEOTP,
    image: R.images.changeSmart,
  },
  {
    id: '2',
    title: 'Rules',
    Screen: UPDATEOTP,
    image: R.images.rules,
  },
  {
    id: '3',
    title: 'FAQs',
    Screen: UPDATEOTP,
    image: R.images.faq,
  },
];

const Item = (props) => {
  const {title, image} = props.item;

  return (
    <View style={styles.container}>
      <Image style={styles.imgIcon} source={image} />
      <View style={{flex: 1, justifyContent: 'center'}}>
        <AppText i18nKey={title} />
      </View>
      <Icon name={'right'} size={20} color={R.colors.color777} />
    </View>
  );
};

const SmartOTP = (props) => {
  return (
    <View style={{flex: 1}}>
      <HeaderBack title={'SettingOTP'} />
      <View style={{marginVertical: 20, backgroundColor: 'white'}}>
        {DATA.map((item) => (
          <Item item={item} />
        ))}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 10,
    paddingVertical: 10,
    borderBottomColor: R.colors.borderGray,
    borderBottomWidth: 0.6,
  },
  imgIcon: {
    width: WIDTHXD(62),
    height: WIDTHXD(62),
    resizeMode: 'contain',
    marginRight: 10,
  },
});

export default SmartOTP;
