import heroVariables from '../global';

const COLOR = heroVariables.TEXT_COLOR;
const FONT_SIZE = heroVariables.HEADER_4;
const H1_FONT_SIZE = heroVariables.HEADER_1;
const H2_FONT_SIZE = heroVariables.HEADER_2;
const H3_FONT_SIZE = heroVariables.HEADER_3;
const H4_FONT_SIZE = heroVariables.HEADER_4;
const H5_FONT_SIZE = heroVariables.HEADER_5;

const fontFamilyStyle = heroVariables.FONT_FAMILY
  ? {
      fontFamily: heroVariables.FONT_FAMILY,
    }
  : {};

const styles = {
  text: {
    fontSize: FONT_SIZE,
    color: COLOR,
    ...fontFamilyStyle,
  },
  h1: {
    fontSize: H1_FONT_SIZE,
  },
  h2: {
    fontSize: H2_FONT_SIZE,
  },
  h3: {
    fontSize: H3_FONT_SIZE,
  },
  h4: {
    fontSize: H4_FONT_SIZE,
  },
  h5: {
    fontSize: H5_FONT_SIZE,
  },
} as const;

export default styles;