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

export const styles = StyleSheet.create({
  scrollContainer: { flexGrow: 1, gap: 16, paddingBottom: 16 },
  tabContainer: {
    gap: 16,
    marginVertical: 8
  },
  tabStyle: {
    flex: 1,
    borderRadius: 4,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 16,
    paddingVertical: 12,
    gap: 4,
    borderWidth: 1,
    backgroundColor: Colors.ORANGE,
    borderColor: Colors.ORANGE
  },
  tabText: {
    fontSize: getFontSize(14),
    fontWeight: 'bold',
    fontFamily: 'redhat-700',
    color: Colors.WHITE
  },
  row: { flexDirection: 'row', alignItems: 'center' },
  multiOption: {
    paddingHorizontal: 12,
    paddingVertical: 8,
    justifyContent: 'space-between'
  },
  optionText: { fontSize: 16, color: Colors.DARK_BLUE, flex: 1 },
  textError: {
    color: Colors.RED,
    fontSize: getFontSize(12),
    fontFamily: 'redhat-600',
    marginTop: 5
  },
  title: {
    color: Colors.DARK_BLUE,
    fontSize: getFontSize(14),
    fontFamily: 'redhat-700',
    marginBottom: 5
  },
  dateSelector: {
    width: '47%',
    height: 44,
    backgroundColor: '#F4F4F4',
    borderRadius: 4,
    paddingHorizontal: 8
  },
  placeholderStyle: {
    fontSize: 16,
    color: Colors.DARK_BLUE
  },
  dropdownContent: {
    borderRadius: 4
  },
  search: {
    height: 40,
    borderRadius: 4
  },
  countryItem: {
    gap: 6,
    paddingHorizontal: 10,
    paddingVertical: 8,
    marginRight: 8,
    marginTop: 8,
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: Colors.DARK_BLUE
  },
  flagSmall: {
    borderRadius: 10,
    width: 20,
    height: 20
  },
  flag: {
    borderRadius: 12,
    width: 24,
    height: 24
  },
  label: { fontSize: 12, fontWeight: '600', color: Colors.DARK_BLUE },
  borderSolid: {
    borderColor: Colors.FILL_LIGHT,
    borderWidth: 1
  }
});
