import {StyleSheet} from 'react-native';
import {COLORS} from '@shared/colors';

export const CIRCLE_DIMENSIONS = 7;
const IMAGE_COUNTER_HEIGHT = 30;
export const MARGIN_VERTICAL_TOP = 15;
export const MARGIN_VERTICAL_BOTTOM = 10;

export const styles = StyleSheet.create({
  container: {alignItems: 'center'},
  imageCounter: {
    alignItems: 'center',
    backgroundColor: COLORS.BROWN,
    borderRadius: IMAGE_COUNTER_HEIGHT / 2,
    flexDirection: 'row',
    height: IMAGE_COUNTER_HEIGHT,
    paddingHorizontal: 10,
    position: 'absolute',
    right: 15,
    top: 15,
  },
  contentContainerStyle: {
    alignItems: 'center',
    flexGrow: 1,
    justifyContent: 'center',
  },
  imageCounterText: {
    color: COLORS.WHITE,
    fontSize: 12,
  },
  avoidMarginVertical: {
    marginBottom: MARGIN_VERTICAL_BOTTOM,
    marginTop: MARGIN_VERTICAL_TOP,
  },
  dotsContainer: {height: CIRCLE_DIMENSIONS},
  image: {height: '100%'},
  scrollViewStyle: {
    height: 'auto',
    marginBottom: 10,
  },
});
