/* eslint-disable react/jsx-props-no-spreading */

import React from 'react';
import PropTypes from 'prop-types';

import { withTheme } from '../styles';
import SubTitleStyled from './Subtitle.style';
import Text from './Text.component';

const SubtitleComponent = (props) => {
  const { children, theme, variation } = props;

  if (variation === 'normal') {
    return (
      <Text color="text" fontSize={theme.fontSizes.subtitle} {...props}>
        {children}
      </Text>
    );
  }

  return (
    <SubTitleStyled
      color="primary.base"
      fontWeight="bold"
      lineHeight="heading"
      my="tiny"
      width={1}
      {...props}
    >
      {children}
    </SubTitleStyled>
  );
};

SubtitleComponent.propTypes = {
  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
  theme: PropTypes.objectOf(Object),
  variation: PropTypes.oneOf(['normal', 'special']),
};

SubtitleComponent.defaultProps = {
  theme: {},
  variation: 'normal',
};

export default withTheme(SubtitleComponent);