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

const { width: screenWidth } = Dimensions.get('window');

export const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  tabBar: {
    backgroundColor: 'transparent',
    elevation: 0,
    shadowOpacity: 0,
    marginTop: 0
  },
  tabView: {
    flex: 1
  },
  tabStyle: {
    padding: 0,
    marginHorizontal: 2,
    backgroundColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',
    width: 'auto'
  },
  tabLabelWrapper: {
    alignItems: 'center',
    justifyContent: 'center',
    position: 'relative'
  },
  tabContent: {
    alignItems: 'center',
    justifyContent: 'center',
    position: 'relative',
    width: screenWidth
  },
  tabLabelContainer: {
    borderRadius: 20,
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderWidth: 1,
    borderColor: 'rgba(15, 63, 79, 0.3)',
    backgroundColor: 'transparent',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 5
  },
  tabLabelFocused: {
    backgroundColor: Colors.ORANGE,
    borderColor: Colors.ORANGE
  },
  label: {
    fontSize: 12,
    textTransform: 'none',
    color: Colors.DARK_BLUE,
    fontWeight: '600',
    textAlign: 'center'
  },
  labelFocused: {
    color: 'white'
  },
  indicator: {
    height: 0,
    backgroundColor: 'transparent'
  },
  icon: {
    alignSelf: 'center'
  },
  notificationContainer: {
    position: 'absolute',
    top: -5,
    right: -5
  },

  gridContainer: {
    flex: 1
  },
  contentContainer: {
    flexDirection: 'row',
    height: '100%'
  }
});