import {StyleSheet, Dimensions, Platform} from 'react-native';
import {RFValue} from 'react-native-responsive-fontsize';
import {Colors, FONTS} from 'global-styles';
const {width} = Dimensions.get('window');

export default StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: width * 0.05,
    paddingBottom: width * 0.04,
  },
  infoSection: {
    marginTop: width * 0.03,
    marginBottom: width * 0.08,
  },
  title: {
    fontFamily: FONTS.poppins[600],
    fontSize: RFValue(15),
    color: Colors.TEXT,
    marginBottom: width * 0.03,
  },
  subTitle: {
    fontFamily: FONTS.poppins[400],
    fontSize: RFValue(11),
    color: Colors.TEXT,
    marginTop: width * 0.01,
  },
  spacing: {
    marginVertical: width * 0.03,
  },
  profileDataSection: {},
  itemSection: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: width * 0.05,
  },
  checkIconSection: isChecked => ({
    width: width * 0.05,
    height: width * 0.05,
    borderRadius: width,
    backgroundColor: isChecked ? Colors.PRIMARY : Colors.GREY,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: width * 0.04,
    alignSelf: 'flex-start',
  }),
  checkIcon: {
    color: Colors.WHITE,
    fontSize: RFValue(13),
  },
  itemTitleSection: {
    flex: 1,
    width: width,
    marginRight: -width * 0.05,
    borderBottomWidth: 1,
    borderBottomColor: Colors.LINE_STROKE,
    height: width * 0.09,
  },
  itemTitle: {
    fontFamily: FONTS.poppins[600],
    fontSize: RFValue(12),
    color: Colors.TEXT,
  },
  chevronRight: {
    fontSize: RFValue(16),
    color: Colors.GREY,
    alignSelf: 'flex-start',
  },

  noteSecureSection: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    marginBottom: width * 0.04,
  },
  shieldIcon: {
    fontSize: RFValue(13),
    color: Colors.PRIMARY,
    marginRight: width * 0.02,
  },
  noteSecureText: {
    fontFamily: FONTS.poppins[400],
    fontSize: RFValue(11),
    color: Colors.TEXT,
    marginTop: -width * 0.002,
  },
  buttonSection: {},
});
