import {StyleSheet, Dimensions, Platform} from 'react-native';
import {RFValue} from 'react-native-responsive-fontsize';
import {Colors, FONTS} from 'global-styles';
const {width} = Dimensions.get('window');

export default StyleSheet.create({
  container: {
    flex: 1,
    paddingBottom: width * 0.04,
  },
  horizontal: {
    paddingHorizontal: width * 0.05,
  },
  infoSection: {
    marginTop: width * 0.03,
    marginBottom: width * 0.04,
  },
  spacing: {
    marginVertical: width * 0.02,
  },
  sceneTopSection: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingBottom: width * 0.04,
    borderBottomWidth: 1,
    borderBottomColor: Colors.LINE_STROKE,
  },
  sceneLabel: {
    fontFamily: FONTS.poppins[600],
    fontSize: RFValue(13),
    color: Colors.TEXT,
  },
  buttonAddCategory: {
    backgroundColor: Colors.RED_SHADOW,
    paddingHorizontal: width * 0.028,
    paddingVertical: width * 0.012,
    borderRadius: width,
  },
  buttonAddCategoryTitle: {
    fontFamily: FONTS.poppins[600],
    fontSize: RFValue(10.5),
    color: Colors.PRIMARY,
  },
  categoryItem: {
    borderBottomWidth: 1,
    borderBottomColor: Colors.LINE_STROKE,
    marginLeft: width * 0.05,
    paddingTop: width * 0.05,
    paddingBottom: width * 0.03,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingRight: width * 0.05,
  },
  categoryTitle: {
    fontFamily: FONTS.poppins[600],
    fontSize: RFValue(11.5),
    color: Colors.TEXT,
  },
  categoryBadgeSection: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  categoryBadge: {
    paddingHorizontal: width * 0.02,
    paddingVertical: width * 0.008,
    backgroundColor: Colors.GREY,
    borderRadius: width * 0.01,
    marginRight: width * 0.02,
  },
  categoryBadgeTitle: {
    fontFamily: FONTS.poppins[500],
    fontSize: RFValue(9),
    color: Colors.TEXT,
  },
  categoryIcon: {
    fontSize: RFValue(14),
    color: Colors.TEXT,
  },
});
