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({
  modal: {
    margin: 0,
  },
  container: {
    flex: 1,
    margin: 0,
    justifyContent: 'flex-end',
  },
  content: {
    height: width / 1.4,
    backgroundColor: Colors.WHITE,
    paddingVertical: width * 0.04,
    paddingHorizontal: width * 0.05,
    borderTopLeftRadius: width * 0.05,
    borderTopRightRadius: width * 0.05,
  },
  buttonClose: {
    backgroundColor: Colors.WHITE,
    width: width * 0.09,
    height: width * 0.09,
    borderRadius: width,
    marginBottom: width * 0.03,
    alignSelf: 'flex-end',
    marginRight: width * 0.03,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonCloseIcon: {
    fontSize: RFValue(20),
    color: Colors.TEXT,
  },
  title: {
    fontFamily: FONTS.poppins[600],
    fontSize: RFValue(13),
    color: Colors.TEXT,
  },
  languageSection: {
    flex: 1,
    marginTop: width * 0.06,
  },
  languageItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: width * 0.06,
  },
  languageInfo: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  languageFlag: {
    width: width * 0.05,
    height: width * 0.05,
    borderWidth: 1,
    borderColor: Colors.LINE_STROKE,
    borderRadius: width,
  },
  languageName: {
    fontFamily: FONTS.poppins[500],
    fontSize: RFValue(12),
    color: Colors.TEXT,
    marginLeft: width * 0.03,
  },
  selected: selected => ({
    width: width * 0.05,
    height: width * 0.05,
    borderWidth: 1,
    borderColor: selected ? Colors.PRIMARY : Colors.GREY,
    borderRadius: width,
    alignItems: 'center',
    justifyContent: 'center',
  }),
  selectedItem: {
    width: width * 0.03,
    height: width * 0.03,
    borderRadius: width,
    backgroundColor: Colors.PRIMARY,
  },

  button: {
    backgroundColor: Colors.PRIMARY,
    height: width * 0.11,
    borderRadius: width * 0.015,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: width * 0.05,
  },
  buttonTitle: {
    fontFamily: FONTS.poppins[500],
    color: Colors.WHITE,
    fontSize: RFValue(12),
    marginTop: width * 0.005,
  },
});
