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

export const styles = StyleSheet.create({
  tabContainer: { flexDirection: 'row', gap: 16, alignItems: 'center', marginVertical: 8 },
  tabStyle: {
    flex: 1,
    borderRadius: 4,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 16,
    paddingVertical: 8,
    gap: 4,
    borderWidth: 1
  },
  deleteTab: {
    backgroundColor: 'transparent',
    borderColor: Colors.RED
  },
  tabText: {
    fontSize: getFontSize(14),
    fontWeight: 'bold',
    fontFamily: 'redhat-700'
  },
  deleteTabText: {
    color: Colors.RED
  },
  addNewTab: {
    backgroundColor: Colors.ORANGE,
    borderColor: Colors.ORANGE
  },
  addNewTabText: { color: Colors.WHITE },
  regionSelector: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    borderRadius: 4,
    height: 36,
    backgroundColor: Colors.FILL_LIGHT,
    justifyContent: 'flex-start',
    gap: 10
  },
  regionText: {
    fontSize: 15,
    color: Colors.LIGHT_GRAY
  },
  regionsLabel: {
    color: Colors.DARK_BLUE,
    fontSize: getFontSize(14),
    fontFamily: 'redhat-700',
    marginBottom: 5
  },
  noRegiosText: {
    fontSize: 14,
    fontWeight: '500',
    color: Colors.LIGHT_GRAY,
    textAlign: 'center',
    paddingVertical: 8
  },
  addRegionBtn: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,
    gap: 10,
    padding: 10,
    borderColor: Colors.DARK_BLUE,
    borderWidth: 1,
    borderStyle: 'solid',
    marginBottom: 16
  },
  addRegionBtntext: {
    color: Colors.DARK_BLUE,
    fontSize: getFontSize(14),
    fontFamily: 'redhat-700'
  },
  regionsContainer: {
    gap: 12
  },
  btnOption: {
    paddingHorizontal: 16,
    paddingVertical: 9,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 16
  },
  btnOptionText: { fontSize: 16, fontWeight: '600', color: Colors.DARK_BLUE },
  wrapper: {
    backgroundColor: Colors.WHITE,
    padding: 16,
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    height: 'auto'
  },
  modal: {
    justifyContent: 'flex-end',
    margin: 0
  }
});
