import {StyleSheet} from 'react-native';
import {NewThemeColors} from '@shared/theme';

import {BadgeVariant} from './interfaces';

export const BADGE_SIZES = {
  dot: 8,
  withValue: 20,
  withBigValue: 28,
};

export const getVariantColor = (
  variant: BadgeVariant,
  theme: NewThemeColors,
) => {
  return {
    primary: theme.graphics.hugo[500],
    error: theme.graphics.error[500],
    success: theme.graphics.success[500],
    warning: theme.graphics.warning[500],
    info: theme.graphics.hugo[500],
  }[variant];
};

export const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    borderRadius: 100,
    height: BADGE_SIZES.withValue,
    justifyContent: 'center',
    width: BADGE_SIZES.withValue,
  },
  bigContainer: {width: BADGE_SIZES.withBigValue},
  dot: {
    borderRadius: BADGE_SIZES.dot / 2,
    borderWidth: 1,
    height: BADGE_SIZES.dot,
    width: BADGE_SIZES.dot,
  },
});
