import React from "react";
import { H1, H2, H3, H4, H5 } from "./HeadingStyles";

export interface HeadingProps {
    level: 1 | 2 | 3 | 4 | 5;
    children?: React.ReactNode;
}
// use named export for the component to apply typescript docgen
export const Heading: React.FC<HeadingProps> = (props) => {
    const HeadingTag = {
        1: H1,
        2: H2,
        3: H3,
        4: H4,
        5: H5,
    }[props.level || 1] as keyof JSX.IntrinsicElements;

    return (
        <HeadingTag>
            {props.children}
        </HeadingTag>
    );
}
