import React from 'react';

import { bem } from 'utils/bem';

import { THEME } from '../../constants'; // TODO: finish config Rollup to work properly with absolute path
import { TYPOGRAPHY_TYPE } from './types';
import { getPadding } from './helpers';

import styles from './typography.scss';

export interface ITypographyProps extends React.HTMLProps<HTMLElement> {
  className?: string;
  theme?: THEME;
  type?: TYPOGRAPHY_TYPE;
  element?: React.ElementType;
  hasPadding?: boolean;
}

const typographyClassName = bem(styles, 'typography');

export const Typography = ({
  className,
  theme = THEME.light,
  type = TYPOGRAPHY_TYPE.body2,
  element: Tag = 'span',
  hasPadding = true,
  children,
  ...htmlAttributes
}: React.PropsWithChildren<ITypographyProps>): React.ReactElement<ITypographyProps> => (
  <Tag
    className={typographyClassName(null, { [theme]: true, [type]: true, [getPadding(type)]: hasPadding }, className)}
    {...htmlAttributes}
  >
    {children}
  </Tag>
);