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

export const styles = StyleSheet.create({
  tabContainer: { flexDirection: 'row', gap: 16, alignItems: 'center', marginBottom: 8 },
  noTripsContainer: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 10 },
  regionSelector: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: 'rgba(250, 250, 250, 1)',
    borderRadius: 4,
    height: 34,
    flex: 1,
    paddingHorizontal: 16
  },
  regionText: {
    fontSize: 14,
    color: Colors.LIGHT_GRAY,
    fontWeight: '500'
  },
  addNewTab: {
    flex: 1,
    backgroundColor: Colors.ORANGE,
    height: 36,
    borderRadius: 4,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 16,
    gap: 4
  },
  addNewTabText: { fontSize: 14, color: Colors.WHITE, fontWeight: 'bold' },
  noTripsIcon: {
    height: 256,
    width: 256,
    borderRadius: 128,
    backgroundColor: '#FAFAFA',
    alignItems: 'center',
    justifyContent: 'center'
  },
  noTripsText: { color: Colors.DARK_BLUE, fontSize: 11, fontWeight: '600' },
  tripsList: {
    flex: 1
  },
  tripsListContentContainer: {
    paddingBottom: 16
  }
});