import {StyleSheet} from 'react-native';
import {BORDER_RADIUS, SPACING} from '@shared/theme';

const RECTANGLE_FLAG_WIDTH = 36;
const RECTANGLE_FLAG_HEIGHT = 24;
const CIRCLE_FLAG_SIZE = 40;

export const styles = StyleSheet.create({
  boxContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    gap: SPACING.x1,
    flex: 1,
  },
  rectangleFlag: {
    width: RECTANGLE_FLAG_WIDTH,
    height: RECTANGLE_FLAG_HEIGHT,
  },
  circleFlag: {
    width: CIRCLE_FLAG_SIZE,
    height: CIRCLE_FLAG_SIZE,
    borderRadius: BORDER_RADIUS.xl,
    overflow: 'hidden',
  },
  menuItem: {
    padding: SPACING.x2,
  },
  menuContainer: {
    paddingVertical: SPACING.x2,
    gap: SPACING.x2,
  },
});
