import { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";

/**
 * # H2 Headers
 * @className twui-h2
 */
export default function H2({
    ...props
}: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) {
    return (
        <h2
            {...props}
            className={twMerge(
                "text-2xl md:text-3xl mb-4",
                "twui-headings twui-heading",
                "twui-h2",
                props.className
            )}
        >
            {props.children}
        </h2>
    );
}
