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

type Props = DetailedHTMLProps<
    HTMLAttributes<HTMLHeadingElement>,
    HTMLHeadingElement
> & {
    noMargin?: boolean;
};

/**
 * # Paragraph Tag
 * @className twui-p | twui-paragraph
 */
export default function P({ noMargin, ...props }: Props) {
    return (
        <p
            {...props}
            className={twMerge(
                "py-4",
                noMargin ? "!m-0 p-0" : "",
                "twui-p",
                "twui-paragraph",
                props.className
            )}
        >
            {props.children}
        </p>
    );
}