/* eslint-disable react/jsx-props-no-spreading */
import React, { forwardRef } from 'react';
import propTypes from 'prop-types';
import { withTheme } from '../styles';

import Box from '../Box';
import { OverflowText } from './Text.style';

const HeadingComponent = forwardRef((props, ref) => {
  const { theme } = props;

  const properties = {
    fontFamily: 'mono',
    fontWeight: 'bold',
    lineHeight: 'heading',
    color: 'title',
    fontSize: theme.fontSizes.heading[props.as],
  };

  if (props.as === 'h1' || props.as === 'h2') {
    properties.fontFamily = 'sans';
  }

  if (props.textOverflow) {
    return <OverflowText ref={ref} tx="text" {...properties} {...props} />;
  }
  return <Box ref={ref} tx="text" {...properties} {...props} />;
});

HeadingComponent.propTypes = {
  as: propTypes.string.isRequired,
  theme: propTypes.objectOf(Object),
  textOverflow: propTypes.bool,
};

HeadingComponent.defaultProps = {
  theme: {},
  textOverflow: false,
};

HeadingComponent.displayName = 'Heading';

export default withTheme(HeadingComponent);