import { FC } from 'react';
import styles from './heading.module.scss';

export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;

export type HeadingProps = {
  /**
   * Set additional classnames.
   */
  className?: string;
  /**
   * Use an heading element or only its styles. Default: false.
   */
  isFake?: boolean;
  /**
   * HTML heading level.
   */
  level: HeadingLevel;
  /**
   * Adds margin. Default: true.
   */
  withMargin?: boolean;
};

/**
 * Heading component.
 *
 * Render an HTML heading element or a paragraph with heading styles.
 */
const Heading: FC<HeadingProps> = ({
  children,
  className,
  isFake = false,
  level,
  withMargin = true,
}) => {
  const TitleTag = isFake ? `p` : (`h${level}` as keyof JSX.IntrinsicElements);
  const levelClass = `heading--${level}`;
  const marginClass = withMargin ? 'heading--margin' : 'heading--regular';

  return (
    <TitleTag
      className={`${styles.heading} ${styles[levelClass]} ${styles[marginClass]} ${className}`}
    >
      {children}
    </TitleTag>
  );
};

export default Heading;