import { Dimensions, StyleSheet } from 'react-native';
import { Colors } from '../../../../theme';
import { getFontSize } from 'src/utils';

export const styles = StyleSheet.create({
  addRegionBtn: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,
    gap: 10,
    padding: 10,
    borderColor: Colors.DARK_BLUE,
    borderWidth: 1,
    borderStyle: 'solid',
    marginBottom: 12
  },
  addRegionBtntext: {
    color: Colors.DARK_BLUE,
    fontSize: getFontSize(14),
    fontFamily: 'redhat-700'
  },
  regionItem: {
    paddingVertical: 8,
    paddingHorizontal: 12,
    gap: 4,
    borderRadius: 8,
    backgroundColor: Colors.FILL_LIGHT,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  regionHeader: { flexDirection: 'row', alignItems: 'center', flex: 1 },
  flagStyle: {
    width: 32,
    height: 32,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: Colors.LIGHT_GRAY,
    marginRight: 12
  },
  nameContainer: {
    flexShrink: 1
  },
  regionName: {
    fontSize: 14,
    fontWeight: 'bold',
    color: Colors.DARK_BLUE
  },
  regionSubname: {
    fontSize: 12,
    fontWeight: '400',
    color: Colors.DARK_BLUE
  },
  trashBtn: {
    backgroundColor: Colors.RED,
    padding: 8,
    borderRadius: 50
  },
  regionsContainer: {
    gap: 12
  },
  noRegiosText: {
    fontSize: 14,
    fontWeight: '500',
    color: Colors.LIGHT_GRAY,
    textAlign: 'center',
    paddingVertical: 8
  },
  optionBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    justifyContent: 'space-between'
  },
  optionText: {
    color: Colors.DARK_BLUE,
    fontSize: getFontSize(14),
    fontFamily: 'redhat-700'
  },
  checkbox: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8
  },
  text: {
    color: Colors.DARK_BLUE,
    fontSize: getFontSize(12),
    flex: 1,
    paddingRight: 4
  },
  textError: {
    fontSize: getFontSize(12),
    fontWeight: '500',
    color: '#EF5B5B',
    marginTop: 5
  }
});
