import "./styles.css";

/**
 * Heading component.
 *
 * This is a reusable heading component. It accepts a prop `As` which determines the HTML element to be used for the heading.
 * It also accepts a prop `className` which is used to add a class to the heading.
 * Some default className can be added such as :
 * ```scss
 * subtitle
 * h2-like
 * h3-like
 * h4-like
 * ```
 *
 * Example usage:
 *
 * ```jsx
 * <Heading As="h1" className='h2-like'>Title</Heading>
 * ```
 */
const Heading = ({ As, className, children }) => {
  return (
    <As className={`heading ${className ? className : ""}`}>{children}</As>
  );
};

export default Heading;
