Heading.js

import React from 'react';
import styled, { css } from 'styled-components';
import { baseTheme, getFont } from '../../../themes/src/index';
import { getFontSize } from './helpers';

const styles = css`
  font-family: ${getFont('bold')};
  font-weight: 500;
  font-size: ${getFontSize};
  margin: 0;
  margin-top: 1rem;
  margin-bottom: 1rem;
`;

const Heading = styled(({ level, children, ...props }) =>
  React.createElement(`h${level}`, props, children)
)`${styles}`;

Heading.defaultProps = {
  level: 1,
  theme: baseTheme,
};

export default Heading;