import heroVariables from '../global';

const WRAPPER_VERTICAL_PADDING = heroVariables.SMALL_SIZE;
const WRAPPER_HORIZONTAL_PADDING = heroVariables.MEDIUM_SIZE;
const CONTENT_FONT_SIZE = heroVariables.HEADER_5;

const fontStyles = heroVariables.FONT_FAMILY !== undefined ? { fontFamily: heroVariables.FONT_FAMILY } : {};

const messageStyles = {
  wrapper: {
    paddingVertical: WRAPPER_VERTICAL_PADDING,
    paddingHorizontal: WRAPPER_HORIZONTAL_PADDING,
    top: 0.0,
    left: 0.0,
    right: 0.0,
  },
  content: {
    ...fontStyles,
    fontSize: CONTENT_FONT_SIZE,
    fontWeight: '500',
    textAlign: 'center',
  },
  errorWrapper: {
    backgroundColor: heroVariables.ERROR_COLOR,
  },
  errorContent: {
    color: heroVariables.INVERTED_TEXT_COLOR,
  },
  warningWrapper: {
    backgroundColor: heroVariables.WARNING_COLOR,
  },
  warningContent: {
    color: heroVariables.INVERTED_TEXT_COLOR,
  },
  successWrapper: {
    backgroundColor: heroVariables.SUCCESS_COLOR,
  },
  successContent: {
    color: heroVariables.INVERTED_TEXT_COLOR,
  },
  infoWrapper: {
    backgroundColor: heroVariables.INFO_COLOR,
  },
  infoContent: {
    color: heroVariables.INVERTED_TEXT_COLOR,
  },
} as const;

export default messageStyles;