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

export const styles = StyleSheet.create({
  megaSelector: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 6,
    backgroundColor: Colors.FILL_LIGHT,
    justifyContent: 'space-between',
    marginBottom: 8
  },
  megaButtonText: {
    color: Colors.DARK_BLUE,
    fontWeight: 'bold',
    fontSize: 13
  },
  progressHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 8
  },
  textSmall: {
    color: Colors.DARK_BLUE,
    fontWeight: '600',
    fontSize: 12
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 16
  },
  textMedium: { fontWeight: 'bold', fontSize: 14, color: Colors.DARK_BLUE },
  optionsContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    gap: 12,
    paddingVertical: 12,
    marginBottom: 8
  },
  optionBtn: { flexDirection: 'row', alignItems: 'center', gap: 8 },
  optionText: {
    fontSize: 13,
    fontWeight: 'bold'
  },
  doneButton: {
    backgroundColor: Colors.ORANGE,
    padding: 12,
    borderRadius: 4,
    marginTop: 20,
    alignItems: 'center'
  },
  doneButtonText: {
    fontSize: 16,
    color: 'white',
    fontWeight: '600'
  }
});
